DIV+CSS ブロックボックスフローティング design_html/css

DIV+CSS ブロックボックスフローティング design_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:01:09

オリジナル

1172 人が閲覧しました

ページをレイアウトする場合、絶対位置を使用してそれを実現できますが、特定のブロックフレームを調整しても他のブロックの位置はそれに応じて変更されないため、これは推奨されるレイアウト方法ではありません。ただし、フローティングブロックボックスの場合は、その外縁がそのブロックを含むブロックの境界線または別のフローティングブロックの境界線に触れるまで、左右に移動できます。また、フロートはドキュメントの通常のフローにないため、ドキュメントの通常のフロー内のブロックボックスはフロートが存在しないかのように動作します。

この記事では、フローティングブロックボックスの簡単な例をいくつかまとめています。

1. ブロックボックスをフローティングせずに並べ替えます

<html>	<head>		<title>DIV+CSS</title>		<style>			body{					margin:0px;			}			div{					width:200px;					height:200px;					font-size:40px;					text-align:center;			}			#one{				background:red;			}			#two{				background:green;			}			#three{				background:yellow;			}		</style>	</head>	<body>			<div id="one">				框（1）			</div>			<div id="two">				框（2）			</div>			<div id="three">				框（3）			</div>	</body></html>

ログイン後にコピー

2. 最初のブロックボックスを右にフローティングします

Re #one セレクターを定義するには、コードを 1 行追加するだけです:

rrree
結果は次のようになります:

3. 最初のものを左にフロートするように設定します。

そのためにはmake 全員がその効果を見て、3 つのブロックのサイズを調整する必要があったため、コードを直接書き直しました。

			#one{				float:right;				background:red;			}

ログイン後にコピー

実行結果:

ボックス (2) がボックス (1) で覆われていることがわかります。幅の追加の 40 ピクセルのみが表示されます。枠(1)がフローティングされた後は、文書フローの範囲に属さず、元の位置が空いているのと同じになるため、枠(2)は自然に埋められます。

4左にフロートする3つのボックスすべてを設定します。

5. 3 つのボックスを左側に設定します (スペース不足)

3 つのブロックのサイズを適宜変更するだけです

実行結果を確認します:

スペースが不十分な場合、ブロックは自動的に下に移動します

6. 3 番目のブロックが最初のブロックによって「スタック」されています

ブロック 3 の上に十分なスペースがありません。下に移動すると、ブロック 1 の余分な部分が自動的にブロック 3 の動きをブロックします。

最後に、別の属性を紹介しましょう。clear (clear 属性、要素がその隣にフローティング要素を持つことを許可するかどうかを指定します)

<html>	<head>		<title>DIV+CSS</title>		<style>			body{					margin:0px;			}			div{					height:200px;					font-size:40px;					text-align:center;			}			#one{				width:200px;				float:left;				background:red;			}			#two{				width:240px;				background:green;			}			#three{				width:200px;				background:yellow;			}		</style>	</head>	<body>			<div id="one">				框（1）			</div>			<div id="two">				框（2）			</div>			<div id="three">				框（3）			</div>	</body></html>

ログイン後にコピー

には、さまざまなクリア効果に対応する合計複数の値があります。この属性を柔軟に使用することで、多くの問題を簡単に解決できます。