对BFC的简单讨论

一、什么是BFC

BFC，即块级格式化上下文(Block Fromatting Context)

W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

换句话说，要创建BFC需满足一下一个或多个条件：

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

可能还是有点抽象，不过从我个人的粗浅见解来看，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。（即相同视角下的不同次元？？？）

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

二、BFC的特性及应用

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

BFC可能造成外边距折叠，也可以利用它来避免这种情况。

请看下面这个例子

从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。这并不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中，从而避免这种情况。

比如改成这样

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

话不多说直接举例

为没有设置固定高度的父元素添加overflow:hidden

这样，不会出现因为子元素的浮动而使父元素高度坍塌的后果

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

此特性一般可以应用于消除文字围绕效果，只需要为有文字的兄弟元素也创建BFC即可