CSS で float のクリアの問題が発生するのはなぜですか?

CSS でフロートをクリアできない問題の原因: 標準フローでは、親要素に height 属性が設定されておらず、親要素内の子要素がフローティングになっています。フローティング要素が元のドキュメント フローの位置を占めると、フローティング要素は元のドキュメント フローの位置を占めなくなります。要素の高さは親要素の高さに計算されません。つまり、要素は折りたたまれて表示されます。

このチュートリアルの動作環境: Windows 10 システム、CSS3、この記事はすべてのブランドのコンピューターに適用されます。

1. フロートのクリアの問題はなぜ発生しますか?

(学習ビデオの推奨: java ビデオ チュートリアル)

親要素に標準フローで設定された高さ属性がない場合、その高さは子要素の高さです。オープンアップ、つまり適応的です。ただし、この親要素内の子要素がフローティングである場合、フローティング要素は元のドキュメント フローの位置を占めなくなるため、フローティング要素の高さは親要素の高さ、およびドキュメント フローの高さでは計算されません。親要素は 0 になり、折りたたまれて表示されます。このような問題を解決するために、フロートをクリアすることを提案しました。

2. CSS を使用してフロートをクリアするにはどうすればよいですか?

1. 親要素に高さを直接追加します

ただし、フローティング要素の高さが不確かな場合は適用されません

2. Clear: Both を直接使用します

ブロック レベルのタグ (p、div など) を親要素の最後に直接追加し、それをクリアします。両方ともフロートをクリアします。

しかし、これでは無駄な空の要素が大量に生成され、リソースが無駄になり、最適な解決策ではありません

3. BFC を使用します:

(1) BFC とは

直訳すると「ブロックレベルの書式設定コンテキスト」となります。要素のレイアウトが外界の影響を受けない独立した描画領域、独立したレイアウト環境です。BFC内にはブロックボックスとラインボックス(ラインボックスはすべてのインライン要素が連続して構成されます)が配置されます。親要素の境界線に沿って垂直方向に移動します。 BFC はページ上で分離された独立したコンテナであり、コンテナ内のサブ要素は外部の要素には影響しません。およびその逆。

(2) 解決策 1:

親要素スタイルに overflow: hidden (表示されない限り) を追加します。このステートメントを追加すると、BFC が作成され、要素がフローティングされます。は BFC にトラップされます。ドキュメント フローから外れないようにするため、フローティング要素の高さが最初に計算されてから非表示になります。親要素が高さを取得すると、その要素が開きます。

(3) 解決策 2:

give 親要素に float float: right を追加します (none でない限り)。このステートメントを追加すると、BFC も作成されます。原理は同じですが、場合によっては、親要素をフローティングにする必要はありませんが、これは私たちのニーズに反します

4。疑似クラス

を使用して、::after 疑似メソッドを通じてフローティング要素の兄弟要素を生成します。親要素の要素を削除し、兄弟要素に対して clear:both メソッドを使用します。

関連する推奨事項: CSS チュートリアル

以上がCSS で float のクリアの問題が発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。