BFC

BFC——格式化上下文。

这到底是个啥？

首先来回顾一下css定位机制。

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 BFC属于普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，是一个独立的渲染区域。简单来说就是一个独立的盒子，并且这个盒子里的布局不受外部影响，也不会影响到外部元素。

具有BFC特性的容器有以下特点：

1. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
2. BFC是页面一个独立的容器，容器里面的元素不会影响到外面的元素，反之亦然。
3. 计算BFC的高度时，浮动元素也会参与计算。
4. BFC内部的盒子Box会在垂直方向，一个接一个地放置。
5. BFC的区域不会与浮动盒子float box重叠。

哪些情况可以触发BFC?

1. body根元素。
2. float属性不为none，也就是left/right。
3. position为absolute或fixed。
4. display为inline-block, table-cell, table-caption, flex, inline-flex。
5. overflow不为visible，也就是auto/hidden。

BFC可以解决什么问题？

1. 清除浮动
   回顾一下我们为啥要清除浮动？主要是为了避免出现父元素高度塌陷的问题。
   高度塌陷示例：

屏幕快照 2020-04-12 下午3.23.12.png

我们把父元素的边框设置为黑色、1px，但发现父元素中的子元素没有被这个边框包裹起来，出现了高度坍塌。
解决办法之一是使用clear:both来清除浮动：

屏幕快照 2020-04-12 下午3.30.06.png

可以看到，问题解决了。

另一个方法是把父元素变成BFC容器，给父元素加上overflow:hidden的样式：

屏幕快照 2020-04-12 下午3.32.40.png

2. 边距重叠问题

问：box1和box2的间隔有多宽？20+20=40(px)？，错了，因为发生了边距重叠，所以两者之间的间隔只有20px。

屏幕快照 2020-04-12 下午3.37.12.png

出现问题的原因是：box1和box2同属于BFC容器body，属于同一个BFC的两个相邻Box的margin会发生重叠。

那么解决方法显而易见：把它们放在不同的BFC里面就ok了。

屏幕快照 2020-04-12 下午3.49.47.png

3. 防止被浮动元素覆盖

屏幕快照 2020-04-12 下午4.22.09.png

box1被浮动元素box2盖住了。

把box1改为BFC试试：

屏幕快照 2020-04-12 下午4.24.25.png

现在两者是并列的，box1不会被覆盖。