BFC(Block Format Contxt)
1. 什么是BFC
BFC规定了内部块级元素的布局方式,默认情况下只有body这个BFC上下文
2. 如何创建一个BFC
- display: inline-block/flex/table-cell/inline-flex
- position: absolute/fixed
- overflow: 值不为visible
- float: 值不为none
3. BFC特点、
- BFC上下文中的块级元素默认按照垂直方式排序
- 同一个BFC中的块级元素会发生margin合并
- 一个BFC就是一个上下文,相互之间不影响
- 计算BFC的高度时,浮动元素也参与计算
4. BFC应用
清除浮动: 因为BFC会计算内部浮动元素的高度,所以想要清楚浮动,可以利用创建一个BFC来包裹浮动元素,从而达到清楚浮动的目的。 创建BFC的方法如上
消除margin合并:在同一个BFC中,两个块级元素的margin会被合并
<body>
<div class='bro1'></div>
<div class='bro2'> </div>
</body>
body{
margin:0;
padding:0;
}
.bro1{
width:300px;
height:200px;
background:#ddd;
margin-bottom:30px;
}
.bro2{
width:200px;
height:100px;
background:pink;
margin-top:20px;
}
最终结果只有30px的margin,就是因为发生了margin合并。 解决办法就是创建新的BFC消除margin合并