关于margin折叠的一个问题。
<html>
<head>
<style>
* {padding: 0; margin: 0;}
#b1 {
width: 300px;
height: 100px;
margin-bottom: 4em;
background-color: #0d8ba1;
}
#F {
float: left;
width: 100px;
height: 70px;
background-color: yellow;
}
#b2 {
/*clear: both;*/
width: 300px;
height: 100px;
background-color: red;
margin-top: 2em;
}
</style>
</head>
<body>
<div id="b1"></div>
<div id="F"></div>
<div id="b2"></div>
</body>
</html>运行时，对比#b2有clear:both与没clear:both时，b1与b2margin的折叠情况。
设置clear:both之后，#b2为了避开浮动的F，往下移动，出现了clearance也就是空隙，b1与b2不再折叠！
另外，stack overflow那个家伙的答案我没再细究。pass。
写回答
-
IT从业collapsing margins
基本上这节意思是说，比邻元素的边距总是折叠。但是得除了以下几种情况：
•Margins of the root element's box do not collapse.（根元素不折叠）•If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.（有间隙不折叠）
•Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children). （浮动不折叠）
•Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.（创建BFC与子不折叠）
•Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).（positioned 不折叠）
•Margins of inline-block boxes do not collapse (not even with their in-flow children).（inline-box 不折叠）
•The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.（兄弟有间隙不折叠）
•The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.（父子间有padding 和 border 不折叠）
楼主所问问题不在这些情况内，所以会合并边距。求折叠。
2019-07-17 19:35:15赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
