float_html/css_WEB-ITnose の影響をクリアする

フローティングにより、図に示すように親要素が折りたたまれます:

解決策:

親要素のオーバーフロー: hidden、示されているように

子要素を挿入してクリアしますで最後は図に示すとおりです

なぜ親要素の overflow:hidden が崩壊の問題を解決するのでしょうか?

Zhihu からの回答貘荍香

overflow:hidden は、余分な部分をカットして非表示にする必要があることを意味します

float 要素が通常のフローの位置を占めていない場合、通常のフローの包含ブロックコンテンツに基づく必要があります 高さのトリミングは非表示になります

高さがデフォルト値 auto の場合、その内部のフローティング要素の高さを計算せずにトリミングすると

フロートがトリミングされる可能性があり、これはレイアウトの常識に反します。

--------------------------------区切り線-------------- -- --------------------

BFC を理解していれば、この問題は簡単に解決できます。BFC が何を言っているか見てみましょう。

BFC レイアウト仕様では、BFC の高さを計算するときに、浮動要素も計算に参加します

overflow: hidden は BFC を作成します。

最後に子要素 Clear を挿入すると折りたたみの問題が解決するのはなぜですか?

clear float とは何かを見てみると、この問題は簡単に解決できます

公式ドキュメントより:

左または右で Clear として宣言されている場合、要素の上部の外側の境界線は正確にその端にありますフローティング要素の下側の外側のマージン ボーダーの下。

OK、良い基礎があれば、さらに先に進むことができます。