floatとは

いい記事が見つかったので記録。


floatとは、通常の流れ(normal flow)から取り除き、左(または右)に寄せるです。


引用元: floatは「回り込み」ではない,
http://mb.blog7.fc2.com/blog-entry-61.html



通常、div 要素などのブロックボックスは、コンテナブロックの最上段からソースに書かれた順番に(積み木のように)ボックスを上から下へ縦に重ねてレイアウトされます。 二つのボックスの縦の距離は上下マージンによって決まり、隣接する上下マージンは相殺し合います。これを通常の流し込み(normal flow)と呼びます。

ただし、フロートは通常の流し込みに属しません。すなわち、

フロートと他のあらゆるボックスとの間ではマージンは相殺し合いません。
フロートの前後のブロックボックスは、フロートが存在しないかのように流し込まれます。
ただし、フロートにつづく行ボックスはフロートの幅を確保するために幅が短縮されます。


引用元: 基礎編5 フロートの性質,
http://www.geocities.jp/multi_column/float/05.html