BFC
定义：
先来看两个相关的概念：
- Box：Box是CSS布局的对象和基本单位，一个页面是由很多个Box组成的，这个Box就是我们所说的盒模型。
- Formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及其他元素的关系和相互作用。
**块格式化上下文（Block Formatting Context，BFC）**是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素不会受外部影响。
创建BFC的条件：
- 根元素：body。
- 元素设置浮动：float除none以外的值。
- 元素设置绝对定位position的absolute、fixed。
- display值为：inline-block、table-cell、table-caption、flex等。
- overflow值为：hidden、auto、scroll。
BFC的特点：
- 垂直方向上，自上而下排列，和文档流的排列方式一致。
- 在BFC中上下相邻的两个容器的margin会重叠。
- 计算BFC的高度时，需要计算浮动元素的高度。
- BFC区域不会与浮动的容器发生重叠。
- BFC是独立的容器，容器内部元素不会影响外部元素。
- 每个元素的左margin值和容器的左border相接触。
BFC的作用：
- 解决margin的重叠问题：由于BFC是一个独立区域，内部元素和外部元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
- 解决高度坍塌的问题：在对子元素设置浮动后，父元素会发生高度坍塌，也就是父元素的高度变为0。解决这个问题，只需要父元素变成一个BFC。常用的办法是给父元素设置
overflow:hidden。 - 创建自适应两栏布局：可以用来创建自适应两栏布局：左边宽度固定，右边的宽度自适应。左侧设置
float:left，右侧设置overflow:hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了两栏自适应布局。
什么是margin重叠？如何解决？
问题描述：两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。
计算原则：折叠合并后外边距的计算原则如下：
- 如果两者都是正数，那么就去最大者
- 如果是一正一负，就是取正值减去负值的绝对值
- 两个都是负值时，用0减去两个中绝对值大的那个
解决办法：对于折叠的情况，主要有两种情况，兄弟之间重叠和父子之间重叠：
（1）兄弟之间重叠：
- 底部元素变为行内盒子：
display: inline-block - 底部元素设置浮动：
float - 底部元素的position值为
absolute/fixed
（2）父子之间的重叠：
- 父元素加入：
overflow：hidden - 父元素添加透明边框：
border: 1px solid transparent - 子元素变为行内盒子：
display: inline-block - 子元素加入浮动属性或定位