首先回顾一下普通流，普通流对后面进一步了解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特性的元素会有以下影响：

一个BFC下，block子元素会垂直排列，且垂直方向上会发生margin合并
BFC中的元素的左外边缘会touch到BFC容器的左边缘（右边同理，这个元素同时包括浮动元素）

内容自W3C BFC

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.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

结合上述两点，各个blog上有这样的总结：

BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。（摘自[张鑫旭blog](www.zhangxinxu.com/wordpress/2…

什么情况下会触发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>
复制代码

包含浮动元素（清除浮动）

这只是清除浮动的一种方式而已，而且也有一些局限性，但做个例子说明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很多场景不适合使用等等

总结

知道原理可以让人少犯某些页面的布局错误
内容有不妥之处请大佬指出
float使用需谨慎！

参考资料

Normal Flow——MDN
CSS深入理解流体特性和BFC特性下多栏自适应布局
 W3C BFC
10 分钟理解 BFC 原理
 CSS 匿名文本和匿名框

据w3c文档了解BFC及应用学习总结