BFC(block format context)的核心就是构造一个独立渲染区域。
根据W3C的定义：
浮动元素（元素的float不为none），
绝对定位元素（元素的 position 为 absolute 或 fixed），
非块级盒子的块级容器（例如inline-blocks，table-cells，and table-captions），
overflow属性值不是“ visible”（visible是overflow的默认值）的块级盒子（视口除外），
这些元素就会为他们的内容创建一个BFC。

作用

一、清除子元素浮动引起父元素高度坍塌

形成条件：父元素有宽度，高度自适应，子元素float不为none
四种方式：
①父元素设置css：overflow:hidden/auto;将父元素设置成BFC
②在父元素内最后插入<div style="clear:both"></div>
③为父元素设置伪元素：

  1. .father::after{
  2.   display:block;
  3.   clear:both;
  4.   content:''
  5. }

④为父元素设置float不为none;一般不使用这种方法。

二、处理文字环绕

如下图所示：类为words的文字会环绕redBlock排列
image.png
设置words的css为overflow:hidden;后，文字不再环绕红色方块排列。如下所示：
image.png

三、左右固定宽度，中间宽度自适应布局

如果三列高度一致可以不设置overflow:hidden;
如果高度不一致，又不设置overflow形成BFC，中间的块会像文字一样环绕两个float。
image.png

四、消除margin重叠

在同一个BFC中，(父子/兄弟)相邻的上下两个元素外边距会重叠，可以利用BFC消除重叠。
如下图，相邻的两个元素之间margin重叠：
image.png
通过将其中一个元素加入到另一个BFC中以消除重叠(overflow是针对于子元素的，所以直接加在.right元素上无效)：
image.png
也可以把其中一个兄弟元素的float设置不为none:
image.png