2012/03/26改訂

●floatを指定した要素は、幅を同時に指定しないと横に並ばない

ボックス1ボックス1ボックス1ボックス1ボックス1ボックス1ボックス1ボックス1ボックス1ボックス1

ボックス2ボックス2ボックス2ボックス2

*テキストの入った要素の幅がウィンドウの幅よりも狭ければ幅を指定しなくても横に並ぶが、文字の大きさが変わるととたんにレイアウトが崩れてしまうので注意。

●floatした要素は親要素から浮いたような状態になっている

トピックストピックストピックス

*親要素のテキストはfloatした要素に回り込むが、背景色やボーダーはfloatした要素の背後に表示される。

*親要素の直下にある要素がすべてfloatされている場合は、親要素の中身がないのと同じ状態になり親要素は高さが0になってしまう。(IE6では親要素の高さが維持され、うまくいっているように思えてしまうので、これまた注意)


*floatした要素に合わせて親要素も高さを持たせたい場合は、floatした要素の最後にfloatをクリアする指定をした要素を追加する。

*clearfixは、回り込みをする要素の親要素にあたるブロックに指定する。
通常の回り込み解除のように、floatを指定した後の解除する位置(要素)に指定するのではない点に注意!