BFC是指一个独立的块级渲染区域，只有Block-level Box（块级元素）参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC可以理解为一个作用范围，即在一个BFC里的布局与其之外的布局不相关或者说不相互影响。在页面中，每个BFC盒子就像是一个个快递盒子，盒子内部子元素如何排列、浮动对其他快递盒子不会产生影响。
一、BFC的布局规则
- 内部的Box会在垂直方向上一个接一个地放置
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（上面元素的margin-bottom和下方元素的margin-top）（按照最大margin值设置）
- 每个元素的margin box的左边， 与包含块border box的左边相接触 （从右到左的格式，则为紧挨右边框），即使浮动元素也是如此（这说明BFC中的子元素不会超出它的包含块）
- BFC的区域不会与浮动盒子重叠。
- 计算BFC的高度时，浮动元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
二、哪些元素会生成BFC
- 根元素(
<html>) - 浮动元素（元素的float不是
none） - 绝对定位元素（元素的
position为absolute或fixed） -
overflow的值不为visible（常用的触发BFC的方式） -
display属性相关，display属性为如下值时- 行内块元素：
inline-block - 表格标题：
table-caption - 表格内容格相关： 元素的
display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table - 弹性元素：
flex或inline-flex - 网格元素：
grid或inline-grid - 新增的
display属性值：flow-root，专门用来生成一个无副作用的BFC
- 行内块元素：
- 多列布局容器：元素的
column-count或column-width不为auto，包括column-count为1
三、BFC的应用
1. 清除内部浮动
示例：
<div>
<h2></h2>
<h2></h2>
</div>
* {
margin:0;
padding:0;
}
div {
border: 5px solid green;
}
h2 {
width: 50px;
height: 50px;
background-color: pink;
float: left;
}
显示结果如下
浮动元素父元素塌陷.PNG
根据BFC布局规则中的规定，计算BFC的高度时，浮动元素也参与计算
div {
overflow: hidden; /*触发BFC*/
}
添加后结果如下
BFC解决高度塌陷.PNG
2. 自适应两栏布局
示例：
<body>
<nav></nav>
<main></main>
</body>
html,body {
width: 100%;
}
nav {
width: 200px;
height: 300px;
background-color: pink;
float: left;
}
main {
height: 400px;
background-color: green;
}
结果如下
两栏布局内容重叠.PNG
根据BFC布局规则，每个元素的margin box的左边， 与包含块border box的左边相接触，因此main会紧贴body左边，被nav元素覆盖
此时利用BFC布局规则，BFC的区域不会与浮动盒子重叠，给main触发BFC，避免重叠
main {
height: 400px;
background-color: green;
overflow: hidden; /*触发BFC*/
}
结果如下
两栏布局实现.PNG
3. 防止外边距重叠
根据BFC布局规则，属于同一个BFC的两个相邻Box的margin会发生重叠。如果同属一个BFC的两个盒子，垂直方向上上方盒子设置margin-bottom:50px;，下方盒子设置margin-top:100px;，实际上两个盒子的外边距是100px（取了最大值）。
如果想解决这个问题，只需要给其中一个盒子包裹一个父元素容器，并将容器转化为BFC，那么这两个盒子便不属于同一个BFC，外边距便不会产生影响
参考资料：MDN-块级格式化上下文
网友评论