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合并
441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
