フロートについて | IT工房

通常フローについて

<div id="container">
		<div id="box-A"><strong>A</strong>…Text Text Text </div>
		<div id="box-B"><strong>B</strong>…Text Text Text </div>
		<div id="box-C"><strong>C</strong>…Text Text Text </div>
		<div id="box-D"><strong>D</strong>…Text Text Text </div>
	</div>

div {
	margin: 10px;
	border: 5px solid #c1c1c1;
	background-color: #85b305;
}
#container{
	background-color:#9FF;
}
#box-B{
	background-color: #FFC;
}
strong{
	color:red;
	font-size:200%;
}

ABCDの各ボックスはすべて同じ条件のdivで囲まれたテキストです。現在は通常フローで綺麗に並んでいます。ボックスＢだけはこれからフロートさせますので背景色を変えています。外側の水色のボックスはdiv#containerで各ボックスを囲んだものです。ABCD各ボックス間の上下のマージンは相殺されていることに着目してください。
次に、ボックスＢのマージンを３０pxに変更しました。ボックスAとボックスBの間のマージンはボックスBのマージン30pxとなります。またボックスBとボックスCの間のマージンもボックスBの30pxとなります。垂直方向のマージンはそれぞれ大きい方のマージンが反映され、合計の４０pxにはなりません。
サンプル

フロート

フロートとは、通常フローからはずれて、現在の通常フローから左または右にシフトしたボックスです。フロートした結果の特徴はフロートしたボックス内の内容（テキストなど）が側面に沿って自由に動いてよい（これは後述の’clear’プロパティによって回り込みを禁止できる）ことです。内容（テキストなど）は左浮動ボックスの右側あるいは右浮動ボックスの左側に流れます。

フロートしたボックスは、自身の外辺が包含ボックス辺または別のフロートしたボックスの外辺に接するときまで左または右に移動します。

もし、テキストが存在する場合、フロートしたボックスの外上部は現在のテキスト上部で揃えられます。

フロートしたボックスのための十分な水平空間（横幅）がない場合、フロートしたボックス下に移動します。（カラム落ちの状態になる）

フロートしたボックスは通常フロー内にないので、浮動体の前後に生成された位置指定されないブロックボックスは、あたかも浮動体が存在しないかのように垂直に流れます。

サンプル

ボックスＢを左にフロートしました。幅は親（#container）の４０％にしました。
Bをフロートすると通常フローは崩れて後続のボックスＣ，ＤがフロートしたボックスＢが存在しないかのようにボックスＢの後ろに入りボックスＡの下に通常フローします。
ボックスＣ，Ｄの中のインライン要素のテキストがボックスＢの幅のだけ領域を確保するように幅が調整されました。
フロートするボックスのマージンは他のボックスのマージンと相殺されません。上下に隣接するＡとＢのボックスのマージンに着目してください。

クリア

clearプロパティとは

clearプロパティはブロック要素のみにかけることができます。（<br>で使用しない）

クリアとはクリアランスを導入するものです。クリアランスとはマージンを抑制し、クリアを設定したブロック要素のmargin-topの上へ空白のつっかえ棒を置いたように振る舞います。浮動体（フロートしたブロック）の背面に入り込んだ通常フローの下辺、あるいは浮動体の上に存在する通常フローの下辺、又は浮動体を囲む包含ブロックの上面から浮動体の下辺にマージンを作ります。
もし、クリアを設定したブロックレベル要素のmargin-topが設定されていたなら、そのマージン値とクリアランスは相殺され値の大きい方が適用されます。

サンプル

ボックスDにクリアプロパティを入れました。clearプロパティはフロートを解除してクリアランスと呼ばれる特殊なマージンを広げフロートしたボックスの下方に位置するように調整されます。
この例ではボックスDのクリアランスはボックスCの下辺からフロートするボックスBの下辺までマージンがとられます。分かりやすいように各ボックスのマージンは０にしています。
ボックスDの上辺に、ボックスCの下辺からボックスBの下辺までのマージンよりも大きなマージンを設定するとそのマージン分だけ間隔が空きます。

高さがとれなくなった親

サンプル

ボックスのサイズ算出は通常フローしている要素に依存します。が、フロートした要素は無視されます。
ボックスＢは親のcontainerから溢れ出します。親のcontainerはフロートしたボックスＢのサイズを無視しています。

サンプル
全てのボックスをフロートさせると親ボックスの算出に使用するボックスがなくなり内容領域の高さは０になります。

サンプル

親ボックスがフロートした子のボックスを包むようにするには、floatを指定する要素の後続の要素にclear プロパティを設定します。

サンプル

親要素にclearfix hackを使用すると親要素はフロートした子要素の高さをとることができます。
overflow:hidden　を使用すると簡単にclearfix hackと同等の効果を得ることができます。

/* clearfix hack */
#container:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#container {
	display: inline-block;
}

/* hide macie */
*html #container {
	height: 1%;
}

#container {
	display: block;
}
/* end hide */
/* end clearfix hack */