高さゼロのスタイル付きレンダリング

Question

数日前にかなり迷惑な問題に遭遇しました。私は、次のような構造を持つウェブサイト上で働いている：

[ヘッダー]
[メニューストリップ]
[特集もの]
[内容]
[フッター]

（これらはすべて水平にしています同じ幅で同じ幅のdivを下に並べる）

その後、「内容」部分の内容を変更します。 "contents" divの中には他のdivがあります。時には高さが固定されていることもあります。

ここに問題があります：宣言された高さのない「内容」に別のdivを置くたびに、内側のdivは0pxでレンダリングされます。内部divに宣言された高さの要素があるかどうかは関係ありません。それは宣言された高さで動作しますが、私はいつもコンテンツの高さを知ることはできません。

この原因は何ですか？

Answer 1

div内の要素が浮動している場合は、clearfixのように表示されます。浮上 要素はコンテナボックス内にあるとき

問題は、その要素が自動的ない 、起こる に浮い要素を調整するコンテナの高さを強制します。要素 がフローティングされている場合、フロートは がフローから削除されているため、その親はもはや を含みません。