フロートをクリアするにはどのような方法がありますか?

フロートをクリアする方法には、クリア属性の使用、オーバーフロー属性の使用、BFC の使用、フレックス レイアウトの使用、グリッド レイアウトの使用、およびフロートをクリアするための疑似要素の使用が含まれます。詳細な紹介: 1. Clear 属性を使用します。これはフローティング要素をクリアする最も一般的な方法です。フローティング要素の後に要素を追加し、その要素に Clear 属性を設定して、前のフローティング要素と一緒にフロートしないようにします。次の 4 つがあります。属性をクリアします。値: left、right、both、none、2. オーバーフローなどを使用します。

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

CSS では、float をクリアするには主に次の方法があります。

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

これは、最も一般的に使用される方法です。クリアフロートウェイ。フローティングされた要素の後に要素を追加し、その要素にクリア プロパティを設定して、以前にフロートされた要素と一緒にフローティングされないようにします。 clear 属性には、left、right、both、none の 4 つの値があります。 left と right の値はそれぞれ左側と右側の float をクリアするために使用され、both の値は両側の float をクリアするために使用され、none の値はクリアが実行されないことを意味します。例:

<div style="float:left;">浮动的元素</div>  <div style="clear:both;"></div>

2. オーバーフロー属性を使用します:

親要素にオーバーフロー属性を設定すると、親要素の高さを自動的に拡張して、次の要素を含めることができます。浮動子要素。この方法は、多くの場合、clearfix テクニックと一緒に使用されます。例:

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

3. BFC (ブロック フォーマット コンテキスト) を使用する:

BFC は、要素がそのコンテンツをどのように配置し、他のリレーションシップやインタラクションと相互作用するかを決定するレンダリング メカニズムです。要素の。 BFC は、次の CSS プロパティを設定することでオンにできます:

• overflow: auto とスクロールを除く任意の値 (overflow:hidden など)。
• 不透明度: 0 以外の値。
• transform: none ではない値。
• 変更予定: 任意の値。
• -webkit-overflow-scrolling: touch 以外の任意の値。
• display: flow-root 以外の任意の値。
• new-box: 新しいボックスを作成する場合 (たとえば、フレックスボックスまたはグリッド レイアウトを使用する場合)。

4. フレックス レイアウトを使用する:

フレックス レイアウトは、要素の配置、方向、順序を自動的に処理する最新の CSS レイアウト方法です。フレックス レイアウトでは、フローティング要素は追加の操作を行わなくても自動的にクリアされます。例:

.container {display: flex;}

5. グリッド レイアウトの使用:

グリッド レイアウトは、複雑な 2 次元レイアウトを作成できる最新の CSS レイアウト方法でもあります。グリッド レイアウトでは、フローティング要素は追加の操作を行わなくても自動的にクリアされます。例:

.container {display: grid;}

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

これは、親要素。例:

.parent::after {content: "";display: table;clear: both;}

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