定义
块级格式化上下文又叫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设置块级格式化上下文,让主区域的宽度随着浏览器视口的大小变化而变化。