CSS でフロートをクリアするいくつかの方法の詳細な紹介

フロートとは何ですか?

特徴: 1 -- フローティング要素は標準フローのスペースを占有しませんが、標準フロー内のテキストのレイアウトに影響します。フローティングは左右に浮くだけです。
2--浮動要素 A の位置は、前の要素に関連しています。 A の上部は、前の要素にフロートがある場合は前の要素の上部と位置合わせされ、フロートがない場合はその下部と位置合わせされます。
3 -- 親ボックス内の子ボックス。子の 1 つがフロートされている場合、1 行を表示するには他の子もフロート化する必要があります。
4 -- 要素がフローティングされた後、幅と高さが設定されていない場合、要素はコンテンツの量に応じてコンテンツのサイズを設定し、インライン ブロック要素の属性を持ちます。
5--要素がフローティングされた後、親要素が高さを設定していない場合。親要素の高さが崩れます。
この問題を解決しますか?
-----親要素に属性を追加: overflow:hidden; 余分な部分を非表示にする

overflow 属性:
ボックス内の要素がブラック ボックス自体のサイズを超える場合、コンテンツの表示方法が変更されます
表示: コンテンツはトリミングされず、要素ボックスの外側に表示されます (デフォルト)
hidden: トリミングされて非表示になります。この属性を使用してフロートをクリアできます
auto: スクロール バーを適応的に表示します
Scroll: コンテンツトリミングされ、スクロール バーが表示されます

bfc:
オーバーフローは要素の bfc をトリガーできます。これにより、要素にレイアウト スペースと権限を与えることができます。bfc 内のすべての要素は、親に従ってタイプセットされ、レイアウトされます。すべての親要素はラップされており、これにより高さの崩壊の原理の問題が解決されます。
フローティング、ポジショニング、オーバーフロー、ディスプレイ、テーブル、テーブルセルはすべて BFC をトリガーできます。

フローティングのクリア:
-- これは、現在の要素の左側と右側にフローティング要素がない場合、要素が標準フローに表示されることを意味します。
--フロートをクリアする 4 つの方法:
1. 空のマーカーを使用してフロートをクリアし、壁に置きます。タグを追加する。
フローティング ラベルの後に

を追加します。幅と高さを設定せずに .clearboth{clear:both} を設定し、空のラベルの後ろに必要なラベルを配置します。 label 以上です
2. overflow 属性を使用して float をクリアします。思わぬ怪我の原因となります。
overflow:hidden;
3. after 擬似オブジェクトを使用して float をクリアします。
4. before after 擬似オブジェクトを使用して float をクリアします。
clearfix (メソッド 2、3、および 4 の組み合わせ、一般的に使用されます)。

.clearfix
   父盒子要把子盒子包裹住，触发bfc同时清除前后浮动。
   .clearfix{
      display:table;<!-- 触发dfc -->

   }
   .clearfix:before,.clearfix:after{
      content:"";
      display:block;
      clear:both;
      height:0;
   }
   在ie6中display:table;不能触发dfc，所以用以下方式进行触发
   .clearfix{
      _zoom:1;
   }

使用法:

<p class="top">top</p>
	<p class="clearfix">
	    <p class="left">left</p>
	    <p class="right">right</p>
	</p>			
	<p class="bottom">bottom</p>

rree

以上がCSS でフロートをクリアするいくつかの方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。