BFC及其应用

什么？你只知道KFC？

也罢也罢，今天要说的BFC其实你经常使用，只是面试官问你时却欲言又止，今天我们一起来研究一下

定位方案

在讲解BFC之前先了解一下常见的定位方案，定位方案是控制元素的布局，有几种常见的方案：

1、普通流（static）

在普通流中，元素按照其在HTML中的先后位置至上而下布局，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说普通流中元素位置由改元素在HTML文档中的位置决定.

2、浮动（float）

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移

3、绝对定位（absolute）

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而具体元素位置由坐标决定

4，相对定位(relative)

在static的基础上，如果我想让一个元素在它本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)。
有一点需要注意的是，相对定位的元素仍然在文档流中，仍然占据着它本来占据的位置空间——虽然它现在已经不在本来的位置了。

BFC

++Block Formatting Context++（块级格式上下文），属于上述定位方案的普通流，是页面盒模型布局中的一种css渲染模式，相当于一个独立的容器，里面的元素和外部的元素互相不影响。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻箱倒海，都不会影响到外部

触发BFC的方式有：

1、body根元素

2、浮动元素：float除none以外的值

3、绝对定位元素：position（absolute、fixed）

4、overflow除了visiable以外的值（hidden、auto、scroll）

5、display为表格布局或者弹性布局（inline-block、table-cells、flex）

BFC主要的作用是：

1、防止同一BFC容器中的相邻元素间的外边距重叠问题

2、清除浮动

3、阻止元素被浮动元素覆盖

BFC特性及应用

1、同一个BFC下外边距会发生折叠

因为两个div元素都处于同一个BFC容器下（这里指body元素）所以第一个div的下边距和第二个div上边距发生了重叠，所以两个盒子之间的距离只有100px，而不是200px

如果想避免外边距的重叠，可以将其放在不同的BFC容器中

这样两个div之间的距离就是200px了

2、BFC可以包含浮动的元素（清除浮动）

由于容器内元素浮动，脱离了普通流

等等，我是管不住你了？

如果使触发容器的BFC，那么容器将会包裹着浮动元素。

3、BFC可以阻止元素被浮动元素覆盖

这时候其实第二个元素有部分信息被浮动元素所覆盖，

如果想避免元素被覆盖，可触发第二个元素的BFC特性，在第二个元素中加入overflow：hidden，就会变成：

这样就阻止了元素被浮动元素覆盖

最后希望大家对BFC有所了解，加油!

参考文献：

https://zhuanlan.zhihu.com/p/25321647