BFC

前言

我们知道浮动元素导致的父元素高度塌陷，解决这个问题时我们是有几种方法的，其中一种设置float父元素也浮动，还有一种是父元素设置overflow:hidden;因为float和overflow会强制父元素包裹浮动的子元素从而父元素就有了高度。
那么为什么float和overflow会强制父元素包裹浮动的子元素？看了BFC，你就知道了。

什么是BFC？

BFC（Block formatting context）
直译为：块级的格式化上下文，它是网页中一个独立的渲染区域，这个渲染区域只有块级元素才能参与，它规定了内部的块级元素如何布局，BFC渲染区域内如何布局，与区域外部毫不相干；外部元素也不会影响BFC渲染区域内的元素。
直白点：是一个独立的空间，并且是个块级元素，外界与自己互不影响。

2种渲染区域

css中有两种渲染区域：块级元素渲染区域（BFC）和行级元素渲染区域(IFC)。

BFC：

• 块级元素渲染区域：display属性为：block,list-item,table的元素，会生成块级元素渲染区域。
• 块级元素渲染区域以BFC方式渲染。

IFC：

• 行级元素渲染区域：display属性为:inline-block,inline,inline-table的元素，会生成行级元素渲染区域。
• 行级元素渲染区域以IFC的方式渲染。

BFC的布局规则

• 默认，内部的块元素会在垂直的方向，一个接一个的放置，每个块元素独占一行；
• 块元素垂直方向的总距离由边框内大小（border+padding+内容）+margin共同决定的；
• 同一个BFC里，相邻的块级元素的，垂直margin会重叠/合并，取最大值，而不是两者相加，相等取共同的margin值，水平方向的margin则不会;
• 计算父元素BFC渲染区域高度时，内部浮动元素的高度，都必须算在内（这里就明白了，为什么浮动元素导致父元素高度塌陷时，父元素使用浮动或者overflow:hidden,就可以，因为这两个属性会形成BFC）;

如何形成BFC？

4种情况会形成BFC渲染区域

1. float不是none;
2. position的值不是static或者relative；
3. display的值是inline-block,table-cell,flex,table-caption,inline-flex；
4. overflow的值不是visible;
   结合BFC的布局规则里面的第4条，因此形成BFC区域可以解决高度塌陷。

可以解决什么问题？

1. 避免垂直方向margin合并；
2. 避免垂直方向margin溢出；
3. 左定宽，右自适应布局；