现象
BFC中相邻的两个block-level盒子，上一个box的下边距和下一个box的上边距会发生叠加，margin的值取两者的最大值。
html:
<div class="parent">
<div class="b">A: margin: 20px</div>
</div>
<div class="parent parentc">
<div class="c">B: margin: 20px</div>
</div>
css:
.parent{
margin: 20px;
width: 150px;
background-color: green;
color: #fff;
border: 1px solid red;
}
.parentc{background-color: blue;}
A和B之间的margin为20px
产生的条件
- 只发生在同一BFC下的block-level模块。
- IFC下的元素不会存在这个现象，即：display：inline-block的元素不会有这种现象。
- 跨BFC模块，不会存在这个问题。
网友评论