ホームページ >ウェブフロントエンド >フロントエンドQ&A >フロートをクリアするにはどのような方法がありますか?
フロートをクリアする方法には、クリア属性の使用、オーバーフロー属性の使用、BFC の使用、フレックス レイアウトの使用、グリッド レイアウトの使用、およびフロートをクリアするための疑似要素の使用が含まれます。詳細な紹介: 1. Clear 属性を使用します。これはフローティング要素をクリアする最も一般的な方法です。フローティング要素の後に要素を追加し、その要素に Clear 属性を設定して、前のフローティング要素と一緒にフロートしないようにします。次の 4 つがあります。属性をクリアします。値: left、right、both、none、2. オーバーフローなどを使用します。
このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。
CSS では、float をクリアするには主に次の方法があります。
これは、最も一般的に使用される方法です。クリアフロートウェイ。フローティングされた要素の後に要素を追加し、その要素にクリア プロパティを設定して、以前にフロートされた要素と一緒にフローティングされないようにします。 clear 属性には、left、right、both、none の 4 つの値があります。 left と right の値はそれぞれ左側と右側の float をクリアするために使用され、both の値は両側の float をクリアするために使用され、none の値はクリアが実行されないことを意味します。例:
<div style="float:left;">浮动的元素</div> <div style="clear:both;"></div>
親要素にオーバーフロー属性を設定すると、親要素の高さを自動的に拡張して、次の要素を含めることができます。浮動子要素。この方法は、多くの場合、clearfix テクニックと一緒に使用されます。例:
.clearfix::after {content: "";display: table;clear: both;}
BFC は、要素がそのコンテンツをどのように配置し、他のリレーションシップやインタラクションと相互作用するかを決定するレンダリング メカニズムです。要素の。 BFC は、次の CSS プロパティを設定することでオンにできます:
フレックス レイアウトは、要素の配置、方向、順序を自動的に処理する最新の CSS レイアウト方法です。フレックス レイアウトでは、フローティング要素は追加の操作を行わなくても自動的にクリアされます。例:
.container {display: flex;}
グリッド レイアウトは、複雑な 2 次元レイアウトを作成できる最新の CSS レイアウト方法でもあります。グリッド レイアウトでは、フローティング要素は追加の操作を行わなくても自動的にクリアされます。例:
.container {display: grid;}
これは、親要素。例:
.parent::after {content: "";display: table;clear: both;}
以上がフロートをクリアするにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。