块级格式化上下文 BFC
官方解释
它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。
BFC 的目的
目的：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。
如何触发 BFC
-
float为left或right -
position为absolute或fixed -
overflow为auto或scrollhidden -
display为table-cell或inline-block
前面两条都是让元素脱离文档流。
能解决的问题
1. 浮动元素的父元素高度塌陷
浮动元素脱离文档流，父元素检测不到浮动元素的高度，发生高度塌陷。
使父元素触发BFC即可，触发BFC后，容器中的子元素绝对不会影响到外面的元素。
常用方法还有：
- 使用伪元素，并在伪元素上添加属性
clear:both; - 添加一个block的空元素，并设置
clear:both; - 为父元素设置高度，缺点是不利于维护
2.解决自适应布局的问题
让自适应栏触发BFC，避免对其他栏产生影响。
3.解决外边距（margin）垂直方向重合的问题
兄弟元素之间的外边距在垂直方向上会取最大值而不是取和。
可以通过触发BFC来防止他们之间相互影响。
比如为其中一个元素的外面包裹一层父元素，并触发父元素BFC，比如设置overflow: hidden，这样就不会发生重叠了。
还可以使用padding来代替margin，但是这样会导致之后无法再用padding。
