float: leftするとどうなるか

See the Pen used floatleft by nakanishi (@nakanishi) on CodePen. この記事に関しては、CodePenのデモは元のサイトでブラウザの横幅を広くし確認いただきたい。 boxとbox2の比較 float: leftすると、それに続くコンテンツが右側に流れていく。floatしない場合には、divはブロック要素なので、次に続くコンテンツは改行された後に配置される。 boxとbox3の比較 float: leftした要素の、前と後ろの両方にコンテンツがある場合、float: leftした要素は、前のコンテンツが終わった後の高さ?で、左端に寄る。 box4とbox5の比較 float: leftした要素の、次のコンテンツに固定の幅を指定した場合としない場合の違い。これを見るとfloatの性質が容易に理解できる。floatされたボックスは浮き、次に続くボックスが背面にめり込む。ただし背面にめり込んだボックスのコンテンツは「floatされたボックスを避けるように」配置される。