Why does the bottom margin of a block-level element with a height of 0 have no effect? _html/css_WEB-ITnose

I encountered a problem while reading "Those Things About CSS". In the two-column fixed-width structure, the bottom margin of the block-level element (i.e. #container) with a height of 0 does not work. What is going on?
The renderings and code are as follows:

* {	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>

Reply to the discussion (Solution)

The poster wants to say that there is no effect?

The poster wants to say that it has no effect?

The elements in the middle container are all floating, so the height of the container is 0, and the distance between it and the footer is gone~~Why is this? But the distance between it and the header is still...

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

Thank you, I understand your method can solve it, and I also know other solutions method, but I want to understand why the top margin of a div with a height of 0 is valid but the bottom margin is invalid?

Clear the float of the container div, clearfix, you can search for it.

The child element floats out of the text flow. In fact, your parent div has margin-bottom, but the height is 0, so it needs to be floated. Do you understand?

The child element floats out of the text flow. In fact, your parent div has margin-bottom, but the height is 0, so it needs to be floated. Do you understand?

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

This line has added margin-bottom to the div. I know that clearing the float can display it, but what I want to understand is why the div is on the outside when its height is 0. Margin is valid but bottom margin is invalid? ! !

Sir, float is relative to the next element, such as two divs, if the first div float:right, then the two divs will be on the same line, and the second div will appear on the right. Of course, you can also use float if there is only one element in a container, but the effect is similar to text-align. If you set the float of the sideBox, it will affect the next element of it. You can remove the float of the sideBox and you can see that the margin-bottom of the footer comes out.

Well, I found out what I said above. The problem is that I tested it myself and found that margin-bottom actually exists, but because the container height is 0, it looks like the picture. It should be caused by the floating of the inner div causing the height of the outer div to be 0. Setting overflow:hidden to the outer div (container) or setting the height of the container can solve the problem.

First of all, thank you for helping me so enthusiastically.
I also know that the floating height of the inner div causes the height of the outer layer to be 0, and I also know many solutions. But my question is, why is the top margin effective when the height of the outer div is 0? Margins valid? I want to know the most fundamental reason, the principle!

Any method that can trigger the container's hasLayou can solve the problem. Breaking away from the layout flow is for the following elements, and is effective for the layout of the front elements. This can be found by setting the margin of the mainbox or sidebox.

The child element floats out of the text flow. In fact, your parent div has margin-bottom, but the height is 0, so it needs to be cleared and floated. I understand. No?

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

This line has added margin-bottom to the div. I know that clearing the float can display it, but what I want to understand is why the div moves to the outside when its height is 0. Margin is valid but bottom margin is invalid? ! !
I think it’s because margin-bottom and margin-top are duplicates. If you change one of them at will, the free size will be displayed as the largest.

The child element floats out of the text flow. In fact, your parent div has margin-bottom, but the height is 0, so The float needs to be cleared, do you understand?

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

This line has added margin-bottom to the div. I know that clearing the float can display it, but what I want to understand is why the div is on the outside when its height is 0. Margin is valid but bottom margin is invalid? ! !
I think it’s because margin-bottom and margin-top are duplicates. If you change one of them at will, the free size will be displayed as the largest.

<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>

Just like these two, the lower margin of the upper div overlaps with the upper margin of the lower div, so the margin space should be shared.
When you change to padding, your gap becomes 20px.

Thank you, it’s really about merging margins... I don’t have a systematic knowledge of css, so I don’t know such basic knowledge. Thank you for your patient help!