css中的BFC

什么是BFC

BFC就是"块级格式化上下文"的意思，
BFC是一块独立的区域，保护其中内部元素不受外部影响，也不影响外部

如何触发BFC

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

BFC的应用

1. 可以用来自适应布局

例如：（很经典的例子) 左边固定，右边自适应
left设置宽高，浮动，left会脱离文档流，left就会压在right上面

解决办法：
给right加overflow:hidden；使其变成BFC，消除外部left因浮动对他的影响

2. 可以清除浮动

父元素中的子元素，设置浮动时，父元素没有设置高度，这时子元素脱离文档流，父元素感知不到子元素的高度，造成父元素的塌陷,就会变成一条线

解决办法：
这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。

3. 解决垂直边距重叠

BFC有两种边距重叠的情况，分别是：
第一种：

父子关系，子元素放在父元素上面，如果给子元素设置margin-top
我们想象的是子元素会往下移动一点
但是实际上是父元素跟着往下移动了

解决办法：
所以这个时候我们需要给父元素变成BFC，给父元素添加overflow:hidden属性

第二种：

兄弟关系，有两个盒子，上面的盒子设置margin-bottom:50px;下面的盒子设置margin-top:30px
中间的间距是50px，如果设置了像这样的双边距，就按最大的

解决办法：
可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题
// 可以在两个盒子中间加上空元素
<div style='overflow:hidden'></div>