BFC的一些理解

一、BFC是什么

1.block formatting contexts （BFC）块级格式化上下文，他是页面中独立的块级渲染区域。

2.他决定了块级元素如何对他的内容进行布局，以及与其他元素的关系和相互关系。

2.1块级元素：父元素（是一个块元素）

2.2内容：子元素（一个块元素）

2.3相互关系：BFC里面的元素与外面的元素不会发生影响。

二、BFC的触发条件

1.根元素html（了解）

2.float值不为none；

3.overflow的值不为visible；

4.display的值为inline-block、table-cell、table-caption；

5.position的值为absolute或fixed

三、BFC的规则

1.内部的盒子会在垂直方向上一个接一个排列（与块级盒子没什么区别）

2.垂直方向上的距离由margin决定（同一个BFC相邻的盒子会发生margin重叠，与方向无关）

3.每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

4.BFC区域不会与float区域重叠

4.计算BFC盒子的高度时，也包括浮动的高度

5.BFC就是页面上一个人隔离的独立容器，里面的元素不会影响到外面的元素，反之亦然。

四、BFC的作用

1.高度的塌陷（就是清浮动，当因为浮动而发生高度塌陷时，触发BFC，使其实现BFC的规则--计算BFC盒子高度时，也包括浮动的高度）

2.magin传递

解决方法：

2.1给父元素加overflow：hidden

2.2给父元素加border

2.3给父元素加padding，去掉margin

2.4给父元素或子元素加float

2.4给父或子加绝对定位

2.5给父或子加inline-block

3.margin重叠

2个垂直排列的块级元素的相反的margin会重叠，取最大值，一正一负取正加负

解决方法：

3.1使用同方向的margin

3.2给第二个元素加浮动

3.3给第二个元素加绝对定位

3.4给第一、二个元素加inline-block；

3.5让2个元素处在不同的BFC中

4.两栏自适应布局