共计 3070 个字符，预计需要花费 8 分钟才能阅读完成。
首先回顾一下普通流，普通流对后面进一步了解 BFC 有很大的作用
普通流（Normal Flow）
普通流是网页中元素的默认排版，默认情况下 块级元素：以 block flow direction 排列（每一个块级元素新起一行，即以从上往下以列排列）行内元素：不会另起一行，一个接一个排布，直到空间不足
脱离普通流
CSS 有以下几种方法使元素脱离普通流
float
float 能够使元素向某一方向偏移，直接看 demo
<div style=”background-color: pink; opacity: 0.5; height: 100px;width: 100px; float: left”>
粉色透明 div 向左 float
</div>
<div style=”background-color: lightblue; width: 400px; height: 400px;”>
<div style=”background-color: yellow; width: 50px; height: 50px;”> 本该在黄色 div 中的文字
环绕粉色 div
</div>
普通流浅蓝色 DIV，与粉色 div 为兄弟元素，且包含黄色子 div
</div>
为方便看出浮动元素脱离普通流遮盖效果，我给粉色 div 加了透明度，可以直接看出其覆盖了蓝色 div 中的黄色 div，同时因为文字会环绕浮动 div，故黄色 div 的文字置于了粉色 div 下方（float 的本来用处是为了实现文字环绕）
absolute 与 fixed
这两种情况相对浮动更易于理解，自己动手实验就好啦
display:none
会使 dom 节点不在渲染树中，不再有分配空间
BFC
简介
先看下 FC，即 Formatting Context（格式化上下文），是 W3C CSS2.1 中的一个概念，指页面的一块渲染区域，有对应的渲染规则（BFC 与 IFC），决定子元素如何定位，及和其他元素之间的关系和相互影响
而 BFC 即 Block Formatting Contexts，触发 BFC 特性的元素会有以下影响（我翻译水平较低，内容来自 W3C BFC）：
一个 BFC 下，block 子元素会垂直排列，且垂直方向上会发生 margin 合并
BFC 中的元素的左外边缘会 touch 到 BFC 容器的左边缘（右边同理，这个元素同时包括浮动元素）
结合上述两点，各个 blog 上有这样的总结：
BFC 元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免 margin 穿透啊，清除浮动什么的也好理解了。（摘自 [张鑫旭 blog](https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/)）
什么情况下会触发 BFC 呢，主要有以下几种情况
根元素，即 HTML 标签
浮动元素：float 值为 left、right
overflow 值不为 visible，为 auto、scroll、hidden
display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
定位元素：position 值为 absolute、fixed
tips：
W3C 文档描述：Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells
, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (
except when that value has been propagated to the viewport) establish new block formatting contexts for
their contents.
应用
BFC 有很多方面应用，了解 BFC 特点后，很多操作也知道原理了
避免 margin 合并 (margin collapse)
同一个 BFC 下：
<div style=”width: 100px;height: 100px;background-color: pink; margin: 20px;” > </div>
<div style=”width: 100px;height: 100px;background-color: pink; margin: 20px;” > </div>
可见 margin 发生合并
不同 BFC 下：
<div style=”overflow: hidden;”>
<div style=”width: 100px;height: 100px;background-color: pink; margin: 20px;” > </div>
</div>
<div style=”overflow: hidden;”>
<div style=”width: 100px;height: 100px;background-color: pink; margin: 20px;” > </div>
</div>
margin 不合并
包含浮动元素（清除浮动）
这只是清除浮动的一种方式而已，而且也有一些局限性，但做个例子说明 BFC 的应用未清除浮动：
<div style=”border: 1px solid black;”>
<div style=”float: left;width: 100px;height: 100px;background-color: pink;” ></div>
</div>
触发 BFC 清除浮动：
<div style=”border: 1px solid black;overflow: hidden;”>
<div style=”float: left;width: 100px;height: 100px;background-color: pink;” ></div>
</div>
题外小声逼逼：使用浮动需谨慎
去除覆盖效果
<div style=”background-color: pink; opacity: 0.5; height: 100px;width: 100px; float: left”>
粉色透明 div 向左 float
</div>
<div style=”background-color: lightblue; width: 400px; height: 400px;”>
普通流浅蓝色 DIV，与粉色 div 为兄弟元素; 普通流浅蓝色 DIV，与粉色 div 为兄弟元素; 普通流浅蓝色 DIV，与
粉色 div 为兄弟元素; 普通流浅蓝色 DIV，与粉色 div 为兄弟元素; 普通流浅蓝色 DIV，与粉色 div 为兄弟元素;
普通流浅蓝色 DIV，与粉色 div 为兄弟元素;
</div>
显示如下
但是触发浅蓝色的 div 之后
overflow: hidden;
此时文字信息为匿名块框, 所以原理还是 BFC 的第二个特点：BFC 中的元素的左外边缘会 touch 到 BFC 容器的左边缘（右边同理，这个元素同时包括浮动元素）
自适应布局
结合上述的去除覆盖效果与 div 默认的 width:auto 可以实现自适应布局，但是也有很多局限性，比如 overflow:hidden 很多场景不适合使用等等 小声逼逼：flex！
总结
知道原理可以让人少犯某些页面的布局错误 内容有不妥之处请大佬指出 小声逼逼：float 使用需谨慎！
参考资料
Normal Flow——MDN CSS 深入理解流体特性和 BFC 特性下多栏自适应布局 W3C BFC 10 分钟理解 BFC 原理 CSS 匿名文本和匿名框
