css面试题7：如何理解BFC

通俗来讲，BFC就是一个独立的布局环境，也可以理解为一个独立的容器，在这个容器里面的元素无论如何排列都不会影响这个容器以外的元素。

创建BFC的条件：

1. 根元素html
2. 设置了浮动，float不是none
3. position不是relative或者static
4. overflow不是visible，比如scroll，auto，hidden，inhert
5. display是inline-block，flex，table-cell，table-caption、inline-flex、list-item等

BFC的特性

1. BFC是一个独立的容器，容器内子元素不会影响容器外的元素的排列
2. 内部的块级元素会在垂直方向依次排列
3. 垂直方向的距离由margin决定，同一个BFC的两个相邻的块级元素，上下外边距会重叠
4. BFC区域不会和float元素发生重叠
5. BFC能够识别并包含浮动元素，在计算BFC区域高度的时候，浮动元素的高度也参与计算了

那么BFC可以解决什么问题呢？

1. 外边距塌陷问题

.parent {
    padding: 20px;
    background-color: #d8d8d8;
}
.item-1 {
    float: left;
    height: 100px;
    width: 200px;
    background-color: darkturquoise;
}
.item-2 {
    float: left;
    height: 100px;
    width: 200px;
    background-color: red;
}
<div class="parent">
    <div class="item-1">item-1</div>
    <div class="item-2">item-2</div>
</div>

如上图，因为子元素设置了float导致了父元素高度塌陷，这时候只需要把父级元素创建BFC，即可解决，效果如下：

.parent {
    padding: 20px;
    background-color: #d8d8d8;
    overflow: auto; /* 创建BFC*/
}

2. 解决margin重叠问题

.margin-parent {
    margin-bottom: 20px;
}
.margin-item1 {
    height: 100px;
    width: 200px;
    background-color: darkturquoise;
    margin-bottom: 10px;
}
.footer {
    border: 1px solid red;
}
<div class="margin-parent">
    <div class="margin-item1">margin-item1</div>
    <div class="margin-item2">margin-item2</div>
</div>
<div class="footer">footer</div>

为了解决这个问题，可以把父元素设置成BFC

.margin-parent {
    margin-bottom: 20px;
    overflow: auto;/*创建BFC*/
}

3.清除浮动

给父级设置成BFC可以清除浮动