CSSでフロートをクリアする方法は何ですか

CSS で float をクリアする方法には、clear 属性、overflow 属性、clearfix クラス、親要素の clearfix クラス、float をクリアする擬似要素、親要素の overflow 属性、および BFC と組み合わせた clear 属性を使用する方法が含まれます。詳細な紹介: 1. フロートをクリアする簡単で一般的な方法であるクリア属性を使用します. フローティング要素の後に空のブロックレベルの要素を追加し、それにクリア属性を設定することで、以前のフローティング効果をクリアして、フローティング要素をクリアすることができます。以下の要素は通常どおりに配置されます。

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

CSS では、フロートは、要素が通常のドキュメント フローから抜け出して、コンテナの左側または右側に沿ってフローティングできるようにする一般的なレイアウト手法です。ただし、フロート要素の高さが異なる場合、またはフロート要素間に重複がある場合、レイアウトの混乱や予期しない副作用が発生する可能性があります。これらの問題を解決するには、さまざまな方法を使用してフロートをクリアします。以下に、float をクリアするためによく使用される CSS メソッドをいくつか紹介します。

1. clear 属性を使用します:

clear 属性は、float をクリアするためのシンプルで一般的に使用される方法です。フローティング要素の後に空のブロックレベル要素を追加し、clear属性を設定することで、前のフローティング要素の効果をクリアし、その下にある要素を正常に配置することができます。 clear 属性は、left、right、両方、または none に設定できます。これは、左のフロート、右のフロートをクリアするか、左と右のフロートを同時にクリアするか、フロートをそれぞれクリアしないことを意味します。

サンプル コード:

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }

サンプル HTML コード:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

2. オーバーフロー属性の使用:

オーバーフロー属性は、オーバーフロー属性をクリアするためによく使用されるもう 1 つの方法です。フロートメソッド。フローティング要素のコンテナーでオーバーフロー属性を auto または hidden に設定すると、BFC (ブロックレベルの書式設定コンテキスト) をトリガーでき、フローティングの効果をクリアできます。これは、BFC がフローティング要素を含めて、コンテナーを正常にレイアウトできるようにその高さを計算するためです。

サンプル コード:

   .clearfix {
     overflow: hidden;
   }

サンプル HTML コード:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

3. clearfix クラスの使用:

clearfix クラスは、クリアによく使用されるクラスです。 floats Name を使用すると、clearfix クラスをフローティング要素のコンテナに追加することでフローティング効果をクリアできます。このメソッドは通常、 pseudo-class::after を使用して空のブロックレベル要素を追加し、その要素に clear 属性を設定します。

サンプル コード:

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }
   .clearfix {
     zoom: 1;
   }

サンプル HTML コード:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

4. 親要素の clearfix クラスを使用します:

場合によっては、フローティング効果をクリアするには、clearfix クラスをフローティング要素の親要素に直接追加します。このメソッドは、前述の clearfix クラスのメソッドに似ていますが、clearfix クラスを親要素に追加すると、すべての子要素のフローティング効果をより簡単にクリアできます。

サンプル コード:

   .parent-element::after {
     content: "";
     display: block;
     clear: both;
   }

サンプル HTML コード:

   <div class="parent-element clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

5. 疑似要素を使用して浮動小数点数をクリアします:

疑似クラスの使用に加えて、次のようにします。 :after 、疑似要素::before を使用して float をクリアすることもできます。空のブロックレベル要素をフローティング要素のコンテナに追加し、その content 属性を空の文字列に設定すると、BFC をトリガーしてフローティング効果をクリアできます。

サンプル コード:

   .clearfix::before,
   .clearfix::after {
     content: "";
     display: table;
   }
   .clearfix::after {
     clear: both;
   }
   .clearfix {
     zoom: 1;
   }

サンプル HTML コード:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

6. 親要素の overflow 属性を使用します:

フローティング要素のコンテナー オーバーフロー属性に加えて、親要素にオーバーフロー属性を設定してフローティング効果をクリアすることもできます。この方法は、上記のオーバーフロー属性の方法に似ていますが、親要素にオーバーフロー属性を設定すると、すべての子要素のフローティング効果を簡単にクリアできます。

サンプル コード:

   .parent-element {
     overflow: hidden;
   }

サンプル HTML コード:

   <div class="parent-element">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

7.clear 属性と BFC の使用:

場合によっては、Combine を渡すことができます。フロートをクリアするには、BFC を使用したクリア属性を使用します。フローティング要素の後に空のブロックレベル要素を追加し、その要素にクリア属性を設定してから、フローティング要素のコンテナのオーバーフロー属性を auto または hidden に設定すると、これら 2 つのメソッドを同時に使用してクリアできます。フローティングエフェクト。

サンプル コード:

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }
   .clearfix {
     overflow: hidden;
   }

サンプル HTML コード:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

要約すると、CSS でフロートをクリアする方法には、clear 属性、overflow 属性、clearfix クラス、および親要素の使用が含まれます。 clearfix クラス、疑似要素のクリア フロート、親要素のオーバーフロー属性、およびクリア属性と BFC メソッドの組み合わせ。実際の開発では、特定のニーズとレイアウト条件に基づいてフロートをクリアする適切な方法を選択し、ページのレイアウトが正しく期待どおりであることを確認できます。

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