フローティング CSS_html/css_WEB-ITnose をクリアする 3 つの方法

フロートのいくつかの重要なポイントについて話しましょう:
フロートは左右にのみフロートし、上下にはフロートしません。

要素がフローティングに設定されると、その要素は 通常のフローから切り離され (position:Absolute; と同じ)、元のレイヤーのスペースを占有せず、次のレイヤーの要素をカバーします。

Floating は、この要素の前の兄弟要素には影響を与えません。

フローティング後、要素の次の兄弟要素は、以前にフロートに設定されていない要素のすぐ後ろに配置されます (要素が通常のフローから外れているか、このレベルにないため、理解しやすいですが、したがって、次の An 要素は当然その位置を埋める必要があります)。

要素の次の兄弟要素にインライン要素 (通常はテキスト) がある場合、その要素は要素の周囲に表示され、「画像を囲むテキスト」と同様の効果が作成されます。 (徹底考察、CSS floatの詳しい解説と展開(1)の説明を参照してください。)

次の兄弟要素も同じ方向にfloatに設定されている場合は、この要素の直後に表示されます。
この要素は をブロック レベルの要素 に変換します。これは、要素に対して display: block; (position:Absolute; と同じ) を設定するのと同等です。

CSS でフローティングを解除する方法は何ですか? float は頻繁に使用され、float によって多くの悪影響が引き起こされる可能性があります。float をクリアすることは必須であり、CSS を作成する際には常に親要素から float をクリアすることも良い習慣と考えられます。
今日のチュートリアルを見てみましょう。これはクリアされていないフローティング ソース コードです。コードを実行すると、親要素の明るい黄色の背景が表示されません。

1 <style type=”text/css”> 2 <!?     *{margin:0;padding:0;}     3 body{font:36px bold; color:#F00; text-align:center;}     #layout{background:#FF9;}     #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}     #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} ?> 4 </style> 5 <div id=”layout”>     6 <div id=”left”>Left</div>     7 <div id=”right”>Right</div>8 </div>

1. 空のタグを使用してフローティングをクリアする 私が長い間使用してきた方法です。空のタグは div タグまたは P タグです。私は十分短い

 1 <style type=”text/css”>  2 <!?     *{margin:0;padding:0;}      3 body{font:36px bold; color:#F00; text-align:center;}     #layout{background:#FF9;}     #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}     #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}      4 .clr{clear:both;}  5 ?>  6 </style>  7 <div id=”layout”>      8 <div id=”left”>Left</div>      9 <div id=”right”>Right</div>     10 <div class=”clr”></div> 11 </div>