BFC

BFC就是“块级格式化上下文”的意思，简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。

1.BFC触发的几种方式：

1. 浮动元素，float 除 none 以外的值；
2. 绝对定位元素，position（absolute，fixed）；
3. display 为以下其中之一的值 inline-block，table-cell，table-caption；
4. overflow 除了 visible 以外的值（hidden，auto）

 

2.BFC的应用

1. 可以用来自适应布局

利用BFC的这个原理可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

给左边盒子加浮动，右边盒子加overflow:hidden;变成BFC，就可以消除外部左边盒子因浮动对他的影响

1. 可以清除浮动

一个父元素中的子元素，设置浮动时，父元素没有设置高度，这时子元素脱离文档流，父元素感知不到子元素的高度，造成父元素的塌陷。
这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。

1. 解决垂直边距重叠

有两种边距重叠的情况：

1.父子关系的边距重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。

解决办法是给父元素添加一个 overflow:hidden，这样父元素就变为BFC，不会随子元素产生外边距

2.同级兄弟关系的重叠

同级元素在垂直方向上外边距会出现重叠现象，最后外边距的大小取两者绝对值大的那个

可通过添加一个空元素或伪类元素，设置overflow:hidden;解决