什么是BFC

目录

1. BFC概念BFC是什么

2. BFC触发的条件

3. BFC的布局应用：

3.1 第一种情况：

3.3 清除浮动的应用

3.4 阻止元素被浮动元素遮挡【左右自适应问题】

3.5 解决父子盒子塌陷问题

---

1.  BFC概念BFC是什么

块级格式化上下文。BFC是一个区域，也是一个独立的运行环境，其中的元素是不受上下文的布局的影响。上下文也不会影响里面的布局区域

2. BFC触发的条件

        overflow:hidden;【hidden值最常用。但只要不为visible的值即可】

        float: none以外的值;

        position:absolute;

        position:fixed;

        display: flex | inline-block | table-cell | table-caption;【注意有时要额外的设置宽度高度】

3. BFC的布局应用：

直接来代码

3.1 第一种情况：

如果同属于一个BFC区域，垂直方向上的盒子上下会发生margin重叠

如下面代码

HTML

    <div>
        <p>我是第一个p标签</p>
        <p>我是第二个p标签</p>
    </div>

CSS

        p {
            height: 200px;
            background-color: pink;
            margin: 40px;
        }

从上面的代码可以看到，两个p标签在一个div里面，就在一个BFC区域里面。

 

从上面两幅图可以看出。无论检查哪一个p标签，上面margin都是30px，但是这个上面30px的边距是重叠了的。

如何达到【不想要两个p之间存在上下边距重叠】的目的？

HTML修改

    <div>
        <p>我是第一个p标签</p>
    </div>
    <p>我是第二个p标签</p> // 这个部分是修改过的。让两个p标签属于不同的BFC区域

CSS修改

        div {
            overflow: hidden; // 这个部分是新增的。
        }

        p {
            height: 200px;
            background-color: pink;
            margin: 40px;
        }

问：上面修改了哪一个部分？

1.修改了第二个p标签的位置。让两个p标签处于不同的位置

2.修改了父盒子的样式，增加了overflow:hidden属性，

3.实现了效果：如下图。现在两个p标签之间的上面边距不存在重叠的情况

如下图，消除了margin上面的重叠

也可以不修改p标签的位置，而是在两个p标签之间添加一个空标签div而不是空p，设置样式为overflow:hidden

        <div style="overflow: hidden"></div>

总结一下：

BFC的一个特点是，一个BFC内部区域的上下盒子的margin值会发生重叠。我们可以通过，两个盒子设置到不同的BFC区域来消除margin。

3.3 清除浮动的应用

父元素没有设置高度

子元素浮动，导致父元素高度很小很小

HTML：

    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <div class="brother"></div>

CSS

        ul {
            width: 800px;
            border: 10px solid red;
        }

        li {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
            list-style: none;
        }

        .brother {
            width: 100%;
            height: 20px;
            background-color: blue;
        }

 如上图，发现父元素设置了红色边框，挤成一坨，高度很小。不仅如此，蓝色盒子也受到了影响，往上挤。

这个时候给父元素设置一些指定属性，如overflow:hidden，就可以解决这个问题

       ul {
            width: 800px;
            border: 10px solid red;
            overflow: hidden; 
        }

如上图所示。不仅ul能够包裹小li，此时检查ul的高度，也会把浮动的小li的高度算进去。

总结一下：

如果父盒子没有设置高度，子盒子设置了高度，子盒子无法撑开父盒子，父盒子宽度很窄。

我们可以通过父盒子设置属性触发成BFC区域，解决这个问题。

3.4 阻止元素被浮动元素遮挡【左右自适应问题】

HTML

    <div class="bro1">这是浮动的元素</div>
    <div class="bro2">这是不浮动的元素</div>

CSS

        .bro1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
            opacity: .5;
        }

        .bro2 {
            /* overflow: hidden; */
            width: 300px;
            height: 400px;
            background-color: blue;
        }

此时页面布局如下图

 蓝色盒子有一部分被粉色盒子遮挡，虽然文字可以正常显示，但我们不想要那部分被遮挡。可以给蓝色盒子触发BFC

        .bro2 {
            overflow: hidden;
            width: 300px;
            height: 400px;
            background-color: blue;
        }

 如上图代码，给蓝色盒子设置overflow:hidden以后，该盒子触发了BFC,BFC盒子的一个特点，不会和float盒子发生重叠，左侧粉色盒子是浮动盒子。

总结一下：

如果出现了浮动盒子遮挡了另一个盒子【此时这个盒子没有触发BFC】，我们可以给它触发BFC，来让它不被遮挡。

3.5 解决父子盒子塌陷问题

我们都知道父盒子的子盒子设置了margin-top，可以通过很多方法解决这个问题。比如父盒子设置overflow:hidden，但是这个解决方法的本身就是让父盒子触发了BFC。

如下面的代码和图片

    <div class="father">
        <div class="son">这是子盒子</div>
    </div>

       .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            /* overflow: hidden; */
            /* position: fixed; */
            /* position: absolute; */
            /* display: inline-block; */
            /* display: table-caption; */
            /* display: table-caption; */
        }

        .son {
            width: 300px;
            height: 100px;
            background-color: blue;
            margin-top: 100px;
        }

修改以后

        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            <!--增加这个属性后-->
            overflow: hidden;
            /* position: fixed; */
            /* position: absolute; */
            /* display: inline-block; */
            /* display: table-caption; */
            /* display: table-caption; */
        }

总结一下：

当子盒子在盒子内部设置了margin-top的值，导致了父子盒子塌陷的问题，我们可以给父盒子触发BFC效果，解决这个问题。

综上：

1. BFC是什么？是一个块级格式化区域【环境】。

2. BFC区域内部的布局有一些特点：

             计算BFC高度时，会算入浮动的子盒子的高度

             内部盒子margin上下会发生重叠

             BFC区域不会受浮动元素的影响【BFC容器里面的子元素不会影响外面的元素，外面的元素也不会影响里面的子元素】

3. BFC的触发条件

        overflow:hidden;【hidden值最常用。但只要不为visible的值即可】

        float: none以外的值;

        position:absolute;

        position:fixed;

        display: flex | inline-block | table-cell | table-caption;【注意有时要额外的设置宽度高度】

4.BFC的解决的问题

父子盒子内边距塌陷

盒子上下的margin重叠

清除浮动的问题

布局左右自适应的情况

    

参考了文章：

1. BFC概念和清除浮动_妖无涯的博客-CSDN博客_bfc清除浮动

2. BFC详解 - 简书

结尾：

学习id： 201903090124-15

现在是大三学生，学习到了前后端交互的身份认证阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。

如果这篇文章有内容侵权，请及时告知删除。

如果这篇文章对你有帮助，可以点个赞鼓励一下嘛哈哈哈