高さが 0 のブロックレベル要素の下マージンが効果がないのはなぜですか? _html/css_WEB-ITnose

「CSS について」を読んでいるときに問題が発生しました。2 列の固定幅構造では、高さ 0 のブロックレベル要素 (つまり #container) の下マージンが機能しません。 ?
レンダリングとコードは次のとおりです:

* {	margin:0;	padding:0;} /* 设置页面中所有元素的内外补丁为0，便于更便捷的页面布局 */#header, #footer {	width:960px;	height:30px;	background-color:#E8E8E8;} /* 设置头部信息以及底部信息的宽度为960px，高度为30px，并添加浅灰色背景色 */#container {	width:960px;	margin:10px 0;} /* 设置页面内容区域的宽度为960px，并设置上下外补丁为10px */.mainBox {	float:left; /* 将主要内容区域向左浮动 */	width:680px;	color:#FF0000;	background-color:#333333;} /* 设置主要内容区域的宽度为680px，背景色以及文本颜色，并居左显示 */.sideBox {	float:right; /* 将侧边栏向右浮动 */	width:270px;	color:#FFFFFF;	background-color:#999999;} /* 设置侧边栏的宽度为270px，背景色以及文本颜色，并居右显示 */#footer {	clear:both;} /* 清除内容区域的左右浮动 */

<div id="header">头部信息</div><div id="container">	<div class="mainBox">主要内容区域</div>	<div class="sideBox">侧边栏</div></div><div id="footer">底部信息</div>

ディスカッション (解決策) への返信

投稿者は、そこには効果がないと言いたいのでしょうか?

投稿者は効果がないと言いたいのでしょうか？

真ん中のコンテナの要素はすべて浮いているので、コンテナの高さは0になり、コンテナとフッターの間の距離はなくなります~~これはなぜですか?しかし、それとヘッダーの間の距離はまだ...

.sideBox {            float:right; /* 将侧边栏向右浮动 */            width:270px;            color:#FFFFFF;            background-color:#999999;            margin-bottom:10px;        } /* 设置侧边栏的宽度为270px，背景色以及文本颜色，并居右显示 */

ありがとう、あなたの方法が解決できることは理解しています、そして他の解決策も知っていますが、なぜ上部の外側のエッジが表示されるのかを理解したいです高さ0のdivのマージンは有効ですが、下のマージンは無効ですか?

コンテナ div の float をクリアし、clearfix を検索します。

実際、親 div には margin-bottom がありますが、高さは 0 なので、フローティングにする必要があります。

実際、親 div には margin-bottom がありますが、高さは 0 なので、クリアしてフローティングにする必要があります。

#container {    width:960px;    margin:10px 0;} /* 设置页面内容区域的宽度为960px，并设置上下外补丁为10px */

この行は div に margin-bottom を追加しました。float をクリアすると表示できることはわかっていますが、私が理解したいのは、div の高さが 0 の場合、なぜ上部のマージンが有効で、下部のマージンが無効になるのかということです。 ！ ！

先生、float は次の要素に対して相対的です。たとえば、2 つの div があり、最初の div が float:right の場合、2 つの div は同じ行に配置され、2 番目の div は右側に表示されます。もちろん、コンテナー内に要素が 1 つしかない場合は float を使用することもできますが、その効果は text-align と似ています。 SideBox に float を設定すると、その次の要素に影響します。sideBox の float を削除すると、フッターの margin-bottom が出てくるのがわかります

さて、あることが分かりました。上記のステートメントには問題があり、テストした結果、実際には margin-bottom が存在しますが、コンテナーの高さが 0 であるため、画像と同じになります。 これは、内側の div が浮動しているために外側の div の高さが 0 になることが原因であるはずです。外側の div (コンテナ) に overflow:hidden を設定するか、コンテナの高さを設定すると、問題を解決できます。

まず最初に、とても熱心に手伝ってくれてありがとう。
内側の div の浮動高さが外側の層の高さを 0 にすることも知っていますし、多くの解決策も知っていますが、私の質問は、高さが 0 の場合、なぜ上部マージンが有効で下部マージンが有効になるのかということです。外側の div は効率的ですか?一番根本的な理由、原理が知りたい！

コンテナの hasLayou をトリガーできるメソッドであれば問題を解決できます。レイアウトフローからの脱却は以下の要素に対してであり、メインボックスやサイドボックスのマージンを設定することでフロント要素のレイアウトに効果的です。

実際、親 div には margin-bottom がありますが、高さは 0 なので、クリアしてフローティングする必要があります。

#container {    width:960px;    margin:10px 0;} /* 设置页面内容区域的宽度为960px，并设置上下外补丁为10px */

この行は div に margin-bottom を追加しました。float をクリアすると表示できることはわかっていますが、私が理解したいのは、div の高さが 0 の場合、なぜ上部のマージンが有効で、下部のマージンが無効になるのかということです。 ！ ！

margin-bottom と margin-top が重複しているためだと思いますが、どちらかを任意に変更すると、フリーサイズが最大で表示されます。

実際、親 div には margin-bottom がありますが、高さは 0 なので、クリアしてフローティングする必要があります。

#container {    width:960px;    margin:10px 0;} /* 设置页面内容区域的宽度为960px，并设置上下外补丁为10px */

この行は div に margin-bottom を追加しました。float をクリアすると表示できることはわかっていますが、私が理解したいのは、div の高さが 0 の場合、なぜ上部のマージンが有効で、下部のマージンが無効になるのかということです。 ！ ！

margin-bottom と margin-top が重複しているためだと思いますが、どちらかを任意に変更すると、フリーサイズが最大で表示されます。

<div style="width:100px;height:50px;background-color:#ff0000;margin-bottom:10px;">af </div><div style="width:100px;height:50px;background-color:#00ff00;margin-top:10px;">ffaf </div>

この2つと同じように、上のdivの下のマージンが下のdivの上のマージンと重なるので、マージンスペースを共有する必要があります。
パディングに変更すると、ギャップは 20px になります。

ありがとうございます、実際はマージンの結合についてです...CSSの体系的な知識がないので、そのような基本的な知識はわかりません。