BFC
2024-02-13 本文已影响0人
夏日冰红茶
BFC(Block Formatting Context)就是块级格式化上下文，是页面上一块独立的渲染区域，内部元素盒子都按照其特定的规则进行排列渲染，且区域内的布局与区域外的布局不相互影响。
1、BFC的渲染规则
（1）水平方向上，撑满整个包含块宽度，垂直方向上，依次摆放；
（2）垂直方向相邻的元素，margin会合并；
（3）父子关系的情况下，可能会产生margin塌陷；
（4）父子关系的情况下，父元素无视浮动元素产生高度坍塌；
（5）兄弟关系的情况下，正常元素可能会被浮动元素覆盖；
2、如何开启BFC?
（1）根元素（HTML）
（2）设置float属性值不为 none
（3）设置position属性（属性需要absolute或是fixed）
（4）设置overflow属性（属性不为visible即可）
（5）行内块元素（inline-block）
(6) 设置display为flow-root的元素
（7）伸缩项目（display:flex）
（8）表格元素
3、应用场景
（1）防止margin塌陷（重叠）
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
</style>
<body>
<p>层1</p>
<p>层2</p>
</body>
如下图所示：
margin重叠.png
解决方案：
可以在p外边包裹一层容器，并触发这个容器生成BFC，那么两个P就不属于同一个BFC中了，就不会出现margin重叠了。
<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
</style>
<body>
<p>层1</p>
<div class="wrap">
<p>层2</p>
</div>
</body>
如下图所示：
边距不会重叠.png
（2）清除内部浮动
