CSSを使ったfloatクリア方法まとめ

この記事では主に、CSS を使用して floating と clear floating を解決するいくつかの方法を紹介します。 1. 親要素の高さを設定します。 2. overflow 3. 子要素 (ブロック レベル) を追加し、その を設定します。 clear 属性 の値は両方とも解決します (間仕切り壁メソッド、内壁メソッド)。 4. フロートをクリアするには、after または beforepseudoobject を使用します。以下のエディターで見てみましょう

1. 親要素の高さを設定します

要素がフローティングしたい場合、その祖先要素は高さボックスのみがフロートを閉じることができます

。高さのあるボックス内にフロートがある限り、このフロートは後続のフロート要素に影響を与えません。

欠点: 作業では、すべてのボックスに高さを追加することはありません。めんどくさいし、ページの急激な変化に対応できないからです。

2. オーバーフロー

は、親要素の高さをサポートします

父親は、フローティングの息子によってサポートされません。ただし、overflow: hidden; が父親に追加されている限り、父親は息子によって押し上げられます。

overflow:hidden; margin を有効にすることができます。

overflow:hidden;
overflow:auto;

短所: 表示すべきオーバーフローコンテンツがある場合、それも同時に非表示になります。

3. 子要素 (ブロック レベル) を追加し、その clear 属性値を Both に設定して問題を解決します

<p>
      </p><p></p>
      <p></p>
     <p></p>
  
   <p>   → clear:both;
       </p><p></p>
       <p></p>
     <p></p>
  

float をクリアする最も簡単な方法は、独自のボックスを表すために、clear:both を追加することです。内部要素。他のボックスの影響を受けません。

欠点: マージンが無効です。 2 つの p の間に隙間はありません。

3.1. 隔壁の方法:

2 つの浮遊要素の間に壁を構築します。後ろの浮動要素が前の浮動要素を追いかけないように、フロートの 2 つの部分を分離します。

壁はそれ自身の体を隙間として利用します。

<p>
       </p><p></p>
       <p></p>
       <p></p>
  
   <p></p>
   <p>
      </p><p></p>
      <p></p>
      <p></p>
  

分割方法は使いやすいことがわかりましたが、最初の p にはまだ高さがありません。ここで、最初の p がその息子に基づいて自動的にその高さに達するようにしたいとします。

3.2. 内壁法:

<p>
       </p><p></p>
       <p></p>
       <p></p>
       <p></p>
   
  <p>
       </p><p></p>
      <p></p>
      <p></p>
  

内壁法の利点は、後部の P が前部の P を追わないことだけでなく、最初の部分の P を追跡できないことです。 p は高さを取得できます。

このようにして、このpの背景と境界線をpの高さに応じて引き伸ばすことができます

4。疑似オブジェクトの後または前に使用してfloatをクリアします

p:after{content:"";display:block;clear:both;}
p:before{content:"";display:block;clear:both;}

この方法はよく使われますプロジェクトではこの方法を使用することをお勧めします

以上がCSSを使ったfloatクリア方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。