BFC（块级格式化上下文）

BFC是css中的块渲染规则，决定了各个元素间的相互作用，用于处理页面布局。具有BFC特性的元素就相当于一个独立的容器，与其他元素互不影响。
默认这个属性是关闭的，如果想打开，需要一些触发条件。
处于BFC区域的元素具有的特征：
1.在同一个BFC区域内的两个相邻元素或者父子元素，它们的垂直外边距会发生重叠。
2.计算高度时，会把浮动子元素计算在内。
3.此元素变成了一个独立的元素，与外界元素不会互相影响。
4.不会被浮动的元素覆盖。

开启BFC的条件：
1.body根元素本身是默认开启了BFC；
2.设置元素浮动，float不为none；
3.设置定位，position：absolute、fixed；
4.设置display：inline-block、table-cell、flex；
5.设置overflow不为visible(hidden、auto、scroll)。

BFC作用：
1.阻止被浮动的元素覆盖，可做两栏布局自适应。
两个相邻的元素，第一个设置了float后，会覆盖在第二个元素上面，为阻止被覆盖，可在第二个元素上设置float、overflow: hidden、position: absolute、display: inline-block;。

<style>
.two{
    width:100px;
    height: 100px;
    background-color: rgb(18, 150, 36);
    float: left;
}
.three{
    width: 200px;
    height: 200px;
    background-color: rgb(201, 24, 24);
    float: left;
    /* overflow: hidden; */
    /*position: absolute;*/
    /*display: inline-block;*/
}
</style>
<body>
<div class="one"> 
     <div class="two"></div>
     <div class="three"></div>
</div>
</body>

2.解决高度塌陷
子元素设置浮动后，父元素如果没设置高度会出现高度塌陷。可以给父元素设置overflow: hidden;、float: left;、position: absolute;、display: inline-block;，但是使用最多的是overflow: hidden;其它的很少用。

<style>
.one{
    width: 150px;
    background-color: rgb(18, 150, 36);
    overflow: hidden;
    /*float: left;*/
    /*position: absolute;*/
    /*display: inline-block;*/
}
.two{
    width: 100px;
    height: 100px;
    background-color: rgb(135, 121, 214);
    float: left;
}
</style>
<body>
<div class="one"> 
    <div class="two"></div>
</div>
</body>

3.解决相邻两块元素垂直外边距、父元素与子元素垂直外边距重叠的问题
垂直外边距重叠的情况：
（1）相邻两元素都设置了margin，在垂直方向上，两元素垂直外边距不会相加，而是取外边距最大的值。
（2）父子关系的元素，子元素设置了margin，在垂直方向上，子元素的margin会传给父元素，使得父元素产生外边距。
为什么会产生这两种垂直外边距的情况？
首先html根元素本身就开启了BFC，处于html中的元素及其子元素其顶部是相邻的，所以会发生上部垂直外边距重叠。
对于相邻的兄弟元素，它们同处于一个BFC区域，所以垂直外边距也发生了重叠。

<style>
.one{
    width: 150px;
    background-color: rgb(225, 231, 226);
}
.two{
    width: 100px;
    height: 100px;
    background-color: rgb(135, 121, 214);
    margin: 10px 0;
}
.three{
    width: 100px;
    height: 100px;
    background-color: rgb(201, 24, 24);
    margin: 10px 0; 
}
.two_top{
    overflow: hidden;
}
</style>
<div class="one"> 
    <div class="two_top">
        <div class="two"></div>
    </div>
    <div class="three"></div>
</div>

在没有添加two_top元素前，two和three是相邻元素，都设置了margin，结果垂直外边距重叠，并且two与父元素one的垂直外边距也重叠。为解决重叠问题，在two外面包裹一个two_top元素，设置overflow: hidden;使得two处于BFC区域，与外界元素隔离，不相互影响，垂直外边距重叠问题消失。

最后编辑于：2020.08.16 11:39:34