块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。（格式上下文、决定文档如何渲染）
IFC（Inline Formatting Context）
BFC布局规则：
- 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
- 生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
分解如下：
- 内部的Box会在垂直方向，一个接一个地排列；
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
- BFC的区域不会与float box重叠；（可用于形成自适应的两栏布局，一列宽度固定，另一列自适应；或多栏布局）
image.png
html:
<div class="tit">利用BFC形成两栏自适应布局</div>
<div class="pt1">
<div class="left">width:200px;<br> float:left;<br> height:200px; <br>background:#ccf;</div>
<div class="right">height:300px; <br>background:#cfc;</div>
</div>
<div class="pt1">
<div class="left">width:200px;<br> float:left;<br> height:200px; <br>background:#ccf;</div>
<div class="right bfc">height:300px; <br>background:#cfc;<br><span class="hl">overflow:hidden;</span></div>
</div>
css:
.pt1{height:300px; background:#ffc; width:500px; margin:20px 0;}/*小黄*/
.pt1 .left{width:200px; float:left; height:200px; background:#ccf;}/*小紫*/
.pt1 .right{height:300px; background:#cfc;}/*小绿*/
.bfc{overflow:hidden;}
.hl{color:red; font-weight:bold; font-size:18px;}
多栏布局同理。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此;
-
计算BFC的高度时，浮动元素也参与计算（可用于清除浮动、避免文字环绕）
image.png
html:
<div class="tit">利用BFC清除浮动</div>
<div class="pt2">
<div class="left">float:left;</div>
<div class="right">float:right;</div>
</div>
<div class="pt2 bfc"><p class="hl">overflow:hidden;</p>
<div class="left">float:left;</div>
<div class="right">float:right;</div>
</div>
css:
.pt2{width:500px; margin:20px 0; border:10px solid red;}
.pt2 .left{width:200px; float:left; height:100px; background:#ccf;}
.pt2 .right{width:300px;float:right; height:100px; background:#cfc;}
.bfc{overflow:hidden;}
.hl{color:red; font-weight:bold; font-size:18px;}
同理可用于清除文字环绕。
- 根元素或包含根元素的元素（body）
- 浮动元素（元素的 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）。
