css-float - clear both または overflow hidden 、clearfix ソリューション

Question

要素を使用してテーブルのないウェブサイトを設計しています。親要素内divに左右の要素がたくさんあります。divdiv

今、私は別のdiv要素を使用して親のdiv高さを自動的に修正しています:

<div style="clear:both"></div>

しかし、同じように以下の作品を知りました。

<div style="overflow:hidden">
    <div style="float:left">...</div>
    <div style="float:right">...</div>
</div>

そして、試してみましたが、動作し、DOM要素の数も減少します。

しかし、それがクロスブラウザかどうかはわかりません。

どの方法が効果的でクロスブラウザですか?

Answer 1

overflow:hidden要素に新しいブロックフォーマットコンテキストを確立させます。これにより、その中に浮かんでいる子のフロート封じ込めが修正されます。clear:bothこのCSS修正は、IE7 +を含むすべての最新のブラウザーでスタイル設定され、機能するHTMLに追加の要素を含めるよりも実用的です。