BFC的作用

先来认识一下BFC是什么

BFC（块级格式化上下文）：BFC是一个独立的渲染区域，只有block-level参与
它规定内部的block-level：block如何布局，并且与这个区域外部毫不相干。

BFC 特性(功能)
1：使 BFC 内部浮动元素不会到处乱跑；
2：和浮动元素产生边界。

要给这些元素添加如下属性就可以触发BFC
1：float属性不为none
2：position为absolute或者fixed
3：display为inline-block，table-cell，table-caption，flex，inline-flex
4：overflow不为visible

相信看到这里很多人都不能理解，我们看看BFC能解决的问题

1.解决父元素高度塌陷问题，

浮动元素会导致父元素高度坍塌，如果一个没有高度的块级元素的子元素浮动的话，则这个块级父元素的高度为0，因为子元素浮起来了，脱离了普通文档流和父级元素不在同一个层面上所以父级元素无法包裹住子元素

这时我们就可以在父盒子上触发BFC，让父盒子里面的浮动元素不会乱跑。

 .father{
        /*浮动元素会导致父元素高度坍塌，如果一个没有高度的块级元素的子元素浮动的话，则这个块级父元素的高度为0*/
        /*因为子元素浮起来了,和父级元素不在同一个层面上所以父级元素无法包裹住子元素*/
        width: 300px;
        border: 1px solid black;
        /*float: left;!*第一种给浮动让father创建BFC*!*/
        /*position: absolute;第2种给定位让father创建BFC*/
        overflow: hidden;/*第三种方法*/
    }
    /*在计算BFC的高度时，自然会检测浮动盒子的高度*/
    .son1,.son2{
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .son2{
        background-color: pink;
    }
</style>

2：解决外边距合并问题
在BFC中，盒子从顶端开始垂直的一个一个排列，盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠

.father{
    width: 100px;
    height: 500px;
    border: 1px solid black;
}
.son1{
    width: 100px;
    height: 100px;
    background-color: purple;
    margin-bottom: 100px;
}
.son2{
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-top: 150px;
}
//html部分
<div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
</div>

将son1和son2分成两个BFC盒子，不会影响到其他区域，就不会产生边距重叠问题。

.father{
    width: 100px;
    height: 500px;
    border: 1px solid black;
}
.son1{
    width: 100px;
    height: 100px;
    background-color: purple;
    margin-bottom: 100px;
}
.son2{
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-top: 150px;
}
.over{
    overflow: hidden;
}
//html部分
div class="father">
<!--    <div class="son1"></div>-->
    <div class="over"><!--解决方法：将son1和son2分成两个BFC盒子，就不会产生边距重叠问题-->
        <div class="son1"></div>
    </div>
    <div class="son2"></div>
</div>

​​3：解决右侧盒子自适应问题

.father{
    height: 400px;
    width: 400px;
    border: 1px solid #000000;
}
.box{
    width: 100px;
    height: 100px;
    background-color: pink;
    float: left;
}
.txt{
    /*文档元素围绕浮动元素*/
    height: 300px;
    background-color: purple;
}

文档流会围绕着浮动元素，这里会有可能会有小伙伴提出疑问，不是所浮动元素已经脱离了文档流了吗？但是为什么文字还是会看见浮动元素 ？其实在最开始浮动元素的作用就是用来做文字环绕效果的，只是后来发现还可以用来布局。这里与绝对定位就有所不同了，绝对定位是完全将定位元素从文本流之中删除，浮动元素虽然删除了但是依然可以影响布局。

该如何解决呢，给文字盒子创建BFC 不再和浮动元素产生交集 而是紧贴浮动元素的边缘

<style>
    .father{
        height: 700px;
        width: 400px;
        border: 1px solid #000000;
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
    }
    .txt{
        /*文档元素围绕浮动元素*/
        height: 300px;
        background-color: purple;
        overflow: hidden;/*给txt创建BFC 不再和浮动元素产生交集 而是紧贴浮动元素的边缘*/
    }
</style>

<div class="father">
    <div class="box"></div>
    <div class="txt">右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
        右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
        右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
        右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
        右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应

    </div>
</div>