BFC的应用

概念：产生BFC后，盒子内部与外部完全隔离

一.产生BFC的方式：

1.overflow只要取值不是visible的情况

2.float的取值不为none的时候

3.display取值为table或者inline-block

4.position的取值是fixed或者absolute

二.常见的BFC的几种作用

1.当两个盒子，一个有margin-bottom属性，一个有margin-top属性，两个盒子的margin值会融合

<style>
    .box1{
    width: 200px;
    height: 200px;
    background-color: red;
    margin-bottom: 50px;
    }
    .box2{
    width: 200px;
    height: 200px;
    background-color: lime;
    margin-top: 50px;
    }
</style>

<div class="box1"></div>

<div class="box2"></div>

可以给其中一个盒子的父盒子添加BFC，添加BFC解决两个盒子margin值相互融合问题

<style>
    .box1{
    width: 200px;
    height: 200px;
    background-color: red;
    margin-bottom: 50px;
    }
    .box2{
    width: 200px;
    height: 200px;
    background-color: lime;
    margin-top: 50px;
    }
    .bfc{
        overflow: hidden;
    }
    </style>


<div class="box1"></div>

<div class="bfc">
<div class="box2"></div>
</div>

2.有两个盒子，一个父盒子，一盒子盒子，给子盒子设置margin-top值后，会将父盒子下拉

<style>
.father{
    width: 200px;
    height: 200px;
    background-color: red;

}
.son{
    width: 100px;
    height: 100px;
    margin-top: 30px;
    background-color: lime;
}
</style>


<div class="father">
    <div class="son"></div>
</div>

给父盒子添加BFC，可以解决父盒子下拉问题

<style>
.father{
    width: 200px;
    height: 200px;
    background-color: red;
    overflow: hidden;
}
.son{
    width: 100px;
    height: 100px;
    margin-top: 30px;
    background-color: lime;
}
</style>


<div class="father">
    <div class="son"></div>
</div>

3.BFC可以用来清除浮动

当子盒子浮动，元素拖标，不能撑开父盒子

<style>
.father{
    width: 300px;
    border: 1px solid #000;
}
.son{
    width: 200px;
    height: 200px;
    background-color: lime;
    float: left;
}
</style>


<div class="father">
    <div class="son"></div>
</div>

给父盒子添加BFC

    <style>
.father{
    width: 300px;
    border: 1px solid #000;
    overflow: hidden;
}
.son{
    width: 200px;
    height: 200px;
    background-color: lime;
    float: left;
}
</style>


<div class="father">
    <div class="son"></div>
</div>