关于BFC - 码农教程

简介

我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。

FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

常见的FC有BFC、IFC（行级格式化上下文），还有GFC（网格布局格式化上下文）和FFC（自适应格式化上下文），这里就不再展开了。

BFC是什么？

BFC全称：Block Formatting Context，BFC翻译过来就是块级格式化上下文。

有人又要问了，那块级格式化上下文又是什么呢？

BFC是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

说白了，他就是一个规则。

BFC的规则是什么呢？

内部的Box会在垂直方向，一个接一个地放置。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。（清除浮动）
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。（解决margin塌陷）
计算BFC的高度时，浮动元素也参与计算(解决父级高度塌陷)

什么叫同一个BFC？

BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。

 1 <div id='div_1' class='BFC'>
 2     <div id='div_2'>
 3         <div id='div_3'></div>
 4         <div id='div_4'></div>
 5     </div>
 6     <div id='div_5' class='BFC'>
 7         <div id='div_6'></div>
 8         <div id='div_7'></div>
 9     </div>
10 </div>

根据定义，#div_1创建了一个块格式上下文，这个上下文包括了#div_2、#div_3、#div_4、#div_5。由于#div_5创建了新的BFC，所以#div_6和#div_7就被排除在外层的BFC之外。

什么情况下触发BFC？

根元素（<html>）
float不为none
position为fixed/absolute
overflow不为visible
行内元素：display：inline-block
表格元素display:table-cell（表格单元）/table-caption(表格标题)/table-cell/table/table-row/ table-row-group/table-header-group/table-footer-group
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）

BFC的应用

应用一：解决父子margin塌陷

1 <div class="parent">
2    <div class="child"></div>
3 </div>

 1 .parent {
 2     width: 200px;
 3     height: 200px;
 4     background-color: lightcoral;
 5     margin-top: 20px;
 6 }
 7 
 8 .child {
 9     width: 100px;
10     height: 100px;
11     background-color: lightseagreen;
12     margin-top: 40px;
13 }

我们这样写了之后发现父亲跟着儿子走了，效果图如下

这时候我们触发父级BFC（具体触发方法前面是有的）。

在这里重点说一下为啥就解决了？

BFC的规则里说道，处于同一个BFC的两个相邻盒子才会发生margin重叠。打破这个规则那就解决了。可是可能有人疑问，明明父亲还包着儿子，这就不是同一个BFC了吗？具体请看什么叫同一个BFC

原文地址：https://www.cnblogs.com/Object-L/p/12080778.html