フローティング要素を閉じる超簡単な方法_CSS/HTML

偶然見つけた非常に良いヒントです。CSS を使用してフローティング要素を閉じる (フロートをクリアする) 方法はたくさんあります。詳細については、old9 のブログを参照してください。フローティング要素を閉じることに関する記事があります。

これらのメソッドの中で私のお気に入りは、:after 疑似クラスを使用して要素を動的に埋め込み、フローティング要素をクリアすることです。残念ながら、コードの量が多すぎて、十分に簡潔ではありません。非常に簡単な方法があることが分かりました。早速紹介していきます。原文は次のとおりです:
http://annevankesteren.nl/2005/03/clearing-floats
原理は次のとおりです。 周辺要素がうまく拡張できない理由はオーバーフローです。 . オーバーフローが表示されないため。 W3C の説明を参照

引用内容:

さらに、要素に下マージンのエッジが下より下にあるフローティング子孫がある場合、それらのエッジを含むように高さが増加され、要素自体の子または通常のフロー内の子孫のフロートのみが取得されます。

今度は、周辺要素に overflow:auto; を追加するだけで、IE を除いて実際に問題を解決できます。解決される。次に IE の問題を解決します。_height:1%; を追加すると問題は完全に解決されます。

以下は比較のために作成した 3 つの例です

1.
閉じた浮動要素なし
2.非 IE で閉じた浮動要素
3.完全に閉じられた要素

<p> </p>超簡単なクリアフロート<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- body{ font:.9em/150% Verdana</style>