块格式化上下文(BFC)
in Origin Pageviews
The picture is not important, the important thing is the content.
块格式化上下文(Block Format Context,BFC)是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生变化的区域，也是浮动元素与其它元素相交的区域。
下列方式会创建块级格式化上下文：
- 根元素或包含根元素的元素
- 浮动元素(元素的
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（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table)overflow值不为visible的块元素display值为flow-root的元素contain值为layout、content或strict的元素- 弹性元素（
display为flex或inline-flex元素的直接子元素） - 网格元素（
display为grid或inline-grid元素的直接子元素） - 多列容器（元素的
column-count或column-width不为auto，包括 column-count为1） column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
块格式化上下文包含创建它的元素内部的所有内容.
块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一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;
overflow: auto;/*解决方案*/
}
<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 的值。
设置 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-inner外部创建BFC，解决blue和red-inner外边距塌陷的问题*/
.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，浮动的内容不会从底部溢出。
当你理解你正在创建一个类似于根元素（浏览器中的<html>元素）的东西时，根据它如何为其中的流布局创建新的上下文，flow-root的值名称是有意义的。
