块格式化上下文(Block Formatting Context,BFC
) 是Web
页面的可视化CSS
渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
下列方式会创建块格式化上下文:
- 根元素(
<html>
) - 浮动元素(元素的
float
不是none
) - 绝对定位元素(元素的
position
为absolute
或fixed
) - 行内块元素(元素的
display
为inline-block
) - 表格单元格(元素的
display
为table-cell
,HTML
表格单元格默认为该值) - 表格标题(元素的
display
为table-caption
,HTML
表格标题默认为该值) - 匿名表格单元格元素(元素的
display
为table、table-row、table-row-group、table-header-group、table-footer-group
(分别是HTMLtable、row、tbody、thead、tfoot
的默认属性)或inline-table
) overflow
值不为visible
的块元素display
值为flow-root
的元素contain
值为layout、content
或paint
的元素- 弹性元素(
display
为flex
或inline-flex
元素的直接子元素) - 网格元素(
display
为grid
或inline-grid
元素的直接子元素) - 多列容器(元素的
column-count
或column-width
不为auto
,包括column-count
为 1) column-span
为all
的元素始终会创建一个新的BFC
,即使该元素没有包裹在一个多列容器中。
块格式化上下文包含创建它的元素内部的所有内容.
块格式化上下文对浮动定位(参见 float
)与清除浮动(参见 clear
)都很重要。浮动定位和清除浮动时只会应用于同一个BFC
内的元素。浮动不会影响其它BFC
中元素的布局,而清除浮动只能清除同一BFC
中在它前面的元素的浮动。外边距折叠(Margin collapsing
)也只会发生在属于同一BFC
的块级元素之间。
范例
让浮动内容和周围的内容等高
为了更好的理解BFC
,我们先看看下面这些。
在下面的例子中,我们让 <div>
元素浮动,并给它一个边框效果。<div>
里的内容现在已经在浮动元素周围浮动起来了。由于浮动的元素比它旁边的元素高,所以<div>
的边框穿出了浮动。正如我们在这篇文章中 guide to in-flow and out of flow elements 解释的,浮动脱离了文档流,所以 <div>
的 background
和 border
仅仅包含了内容,不包含整个浮动。
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border:1px solid black;
padding: 10px;
}
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
创建一个会包含这个浮动的BFC
,通常的做法是设置父元素 overflow: auto
或者设置其他的非默认的 overflow: visible
的值。
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
overflow: auto;
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border:1px solid black;
padding: 10px;
}
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
设置 overflow: auto
创建一个新的BFC
来包含这个浮动。我们的 <div>
元素现在变成布局中的迷你布局。任何子元素都会被包含进去。
使用 overflow
来创建一个新的BFC
,是因为 overflow
属性告诉浏览器你想要怎样处理溢出的内容。当你使用这个属性只是为了创建BFC
的时候,你可能会发现一些不想要的问题,比如滚动条或者一些剪切的阴影,需要注意。另外,对于后续的开发,可能不是很清楚当时为什么使用overflow
。所以你最好添加一些注释来解释为什么这样做。
外边距塌陷
创建新的BFC
避免两个相邻 <div> 之
间的 外边距合并 问题
HTML
<div class="blue"></div>
<div class="red-outer">
<div class="red-inner">red inner</div>
</div>
CSS
.blue, .red-inner {
height: 50px;
margin: 10px 0;
}
.blue {
background: blue;
}
.red-outer {
overflow: hidden;
background: red;
}
结果
使用display: flow-root
一个新的 display
属性的值,它可以创建无副作用的BFC
。在父级块中使用 display: flow-root
可以创建新的BFC
。
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
display: flow-root;
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border:1px solid black;
padding: 10px;
}
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
给 <div> display: flow-root
属性后,<div>
中的所有内容都会参与BFC
,浮动的内容不会从底部溢出。
The value name of flow-root makes sense when you understand you are creating something that acts like the root element ( element in browser) in terms of how it creates a new context for the flow layout inside it.