CSS では float をクリアする方法が何通りありますか?

今回は、CSS で float をクリアする方法と、float をクリアするための 注意事項 を紹介します。実際のケースを見てみましょう。

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

要素がフロートしたい場合、その祖先要素は高さを持つ必要があります

それがボックス内でフロートしている限り。高さがある場合、このフローティングは後続のフローティング要素に影響を与えないため、フローティングの影響をクリアする必要があります。

欠点: 作業では、すべてのボックスに高さを追加することはできないためです。急速な変化に適応します。

2. オーバーフロー

親要素の高さを支えます

父親は、浮いている息子によって支えられることはできません。ただし、overflow: hidden; が父親に追加されている限り、父親は息子によって押し上げられます。

overflow:hidden; マージンを有効にします。

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 class="clear"></p>
   <p>
      <p></p>
      <p></p>
      <p></p>
  </p>

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

3.2. 内壁法:

<p>
       <p></p>
       <p></p>
       <p></p>
       <p class="clear"></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;}

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

WeChatの赤い封筒を開くアニメーションを実装するためのReactとCSS3
CSSでのbackground-attachmentの使用の詳細な説明

クリックして拡大を実装するためのCSS3アニメーションの例

以上がCSS では float をクリアする方法が何通りありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。