块级格式化上下文BFC

定义

块级格式化上下文又叫BFC，它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局

布局规则

1.常规流块盒在水平方向上，必须撑满包含块
2.常规流块盒在包含块的垂直方向上依次摆放
3.常规流块盒若外边距无缝相邻，则进行外边距合并（以数字大的为准，只有margin-top和margin-bottom会合并）
4.常规流块盒的自动高度和摆放位置，无视浮动元素

.child{
width: 100px;
height: 100px;
background-color: black;
}
<div class="parent">
        <div class="child"></div>
 </div>

黑色的是子元素，盒模型是父元素的盒模型
为什么父元素的宽度是1904px？

BFC的渲染区域

1.根元素（也就是html元素，覆盖了网页中的所有元素）
2.浮动和绝对定位元素
3.overflow不等于visible的元素
根据渲染区域的规则我们可以看到，根元素也会创建BFC，根据布局规则的第1点，父元素会水平撑满根元素的宽度，所以宽度为1904px。如果子元素不写width那么它也会撑满父元素的宽度.

如果我们给子元素加一个浮动

.child{
width: 100px;
height: 100px;
background-color: black;
float: left; 
}

父元素的高度变成了0，满足布局规则的第四点。

外边距合并例子

.child{
 width: 100px;
height: 100px;
background-color: black;
margin: 10px 0;
}
.child2{
width: 100px;
height: 100px;
background-color: red;
margin: 20px 0;
}
<div class="parent">
        <div class="child"></div>
        <div class="child2"></div>
</div>

从这里我们可以看到红色和黑色方块之间的margin是20，而不是30.

独立性

1.不同的BFC区域，它们进行渲染时互不干扰
2.隔绝了它内部与外部的联系，内部的渲染不会影响到外部

具体规则

1.创建BFC的元素，它的自动高度需要计算浮动元素
2.它的边框盒不会与浮动元素重叠
3.它不会和它的子元素进行外边距合并

如果我们给父元素创建BFC，那么它的高度会自动计算浮动元素

.parent{
width: 200px;
overflow:hidden;
}
.child{
width: 100px;
height: 100px;
background-color: black;
float: left;
}

应用场景

在我们进行两栏或者三栏布局的时候，可以通过给主区域添加overflow：hidden设置块级格式化上下文，让主区域的宽度随着浏览器视口的大小变化而变化。