BFC的定义
BFC:Block Formatting Context,即:“块级格式化上下文”。
边距重叠
依照我的个人理解,所谓的边距重叠,就是“谁大谁牛逼”。举个例子,如果有两个块级box,这两个box都是按照标准流垂直摆放的,第一个盒子指定了20px的margin,第二个盒子指定了10px的margin,理论上这两个盒子的margin应该是:20px + 10px = 30px,但实际上只取较大的margin为实际的margin,也就是20px,这就是边距重叠了。
<style>
.d1 {
margin-bottom: 20px;
height: 100px;
background-color: red;
}
.d2 {
margin-top: 10px;
height: 100px;
background-color: green;
}
</style>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
效果图:
可以看到,第一张图的黄色部分是20px,第二章图的黄色部分是10px,总体的之间的margin是取的box1的20px,即较大者。
解决办法
用div或者section把第一个盒子或者第二个盒子包起来,再对盒子的父元素的overflow属性设置hidden即可。
具体代码实现:
<style>
.d {
overflow: hidden;
}
.d1 {
height: 100px;
background-color: green;
margin-bottom: 20px;
}
.d2 {
height: 100px;
background-color: red;
margin-top: 10px;
}
</style>
<body>
<div class="d">
<div class="d1"></div>
</div>
<div class="d2"></div>
</body>
效果图:
可以看到,现在总的外边距很明显变成了30px而不是较大的20px。