块级格式化上下文 BFC

官方解释

它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

BFC 的目的

目的：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。

如何触发 BFC

1. float 为 left 或 right
2. position 为 absolute 或 fixed
3. overflow 为 auto 或 scroll hidden
4. display 为 table-cell 或 inline-block

前面两条都是让元素脱离文档流。

能解决的问题

1. 浮动元素的父元素高度塌陷

浮动元素脱离文档流，父元素检测不到浮动元素的高度，发生高度塌陷。

使父元素触发BFC即可，触发BFC后，容器中的子元素绝对不会影响到外面的元素。

常用方法还有：

1. 使用伪元素，并在伪元素上添加属性clear:both;
2. 添加一个block的空元素，并设置clear:both;
3. 为父元素设置高度，缺点是不利于维护

2.解决自适应布局的问题

让自适应栏触发BFC，避免对其他栏产生影响。

3.解决外边距（margin）垂直方向重合的问题

兄弟元素之间的外边距在垂直方向上会取最大值而不是取和。

可以通过触发BFC来防止他们之间相互影响。

比如为其中一个元素的外面包裹一层父元素，并触发父元素BFC，比如设置overflow: hidden，这样就不会发生重叠了。

还可以使用padding来代替margin，但是这样会导致之后无法再用padding。