BFC简述

说好不emo

已于 2023-09-19 08:51:00 修改

阅读量147

点赞数 2

文章标签： css css3 前端

于 2023-09-18 20:23:22 首次发布

本文链接：https://blog.csdn.net/2301_77456141/article/details/132993171

版权

1、BFC概念：

即Block Formatting Context，格式化上下文，BFC是 Web 页面中盒模型布局的 CSS 渲染模
式，指一个独立的渲染区域或者说是一个隔离的独立容器，和外部元素互不影响。

2、触发BFC的条件：

根元素
float 的值不为 none
overflow 的值不为 visible
display 的值为 inline-block、table-cell、table-caption、flex、inline-flex
position 的值为 absolute、fixed

3、BFC的原理？

（1）BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
（2）BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
（3）BFC的区域不会与float重叠。
（4）计算BFC的高度时，浮动元素也被计算在内。

4、BFC的应用：

（1）可以用来自适应布局

利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。（下图中left左浮，脱离了正常文档流）

这时给right添加overflow:hidden；触发BFC就会消除外部浮动对他的影响

<body>
    <div class="top">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="bottom">bottom</div>
</body>

</html>
<style lang="less" scoped>
    * {
        margin: 0px;
        padding: 0px;
    }
    
    .top {
        width: 100%;
        .left {
            width: 200px;
            height: 100px;
            float: left;
            background: greenyellow;
        }
        .right {
            width: auto;
            height: 150px;
            background: aqua;
            overflow: hidden;
        }
    }
    
    .bottom {
        width: 100%;
        height: 100px;
        background: aquamarine;
    }
</style>

（2）可以清除浮动

父元素未设置固定高度时，子元素左浮脱离文档流，父元素感知不到子元素高度，造成了高度塌陷

解决方法：

<body>
    <div class="top">
        <div class="left">left</div>
    </div>
    <div class="bottom">bottom</div>
</body>

</html>
<style lang="less" scoped>
    * {
        margin: 0px;
        padding: 0px;
    }
    
    .top {
        background: green;
        width: 100%;
        overflow: hidden;
        .left {
            width: 200px;
            height: 100px;
            float: left;
            background: greenyellow;
        }
    }
    
    .bottom {
        width: 100%;
        height: 100px;
        background: aquamarine;
    }
</style>

（3）解决垂直边距重叠

小知识：1、什么是边距重叠？

两个盒子如果都设置了边距，那么在垂直方向上，两个盒子的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上，或者两个盒子为父子关系时子元素的外边距使父元素一起产生了外边距。

2、边距重叠的两种情况：

（1）父子关系的边距重叠

如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距

解决方法：给父元素添加overflow：hidden，触发BFC即可

<body>
    <div class="top">
        <div class="left">left</div>
    </div>
</body>

</html>
<style lang="less" scoped>
    * {
        margin: 0px;
        padding: 0px;
    }
    
    .top {
        background: green;
        width: 400px;
        height: 200px;
        overflow: hidden;
        .left {
            width: 200px;
            height: 100px;
            background: greenyellow;
            margin-top: 50px;
        }
    }
</style>

（2）同级兄弟关系的重叠：

同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

解决方法：在两者之间添加空元素或者伪元素，并且给其添加overflow：hidde属性

<body>
    <div class="box">
        <div class="top">top</div>
        <div style="overflow: hidden;"></div>
        <div class="bottom">bottom</div>
    </div>
</body>

</html>
<style lang="less" scoped>
    * {
        margin: 0px;
        padding: 0px;
    }
    
    .box {
        background: green;
        width: 400px;
        height: 400px;
        overflow: hidden;
        .top {
            width: 200px;
            height: 100px;
            background: greenyellow;
            margin-bottom: 50px;
        }
        .bottom {
            margin-top: 30px;
            width: 200px;
            height: 100px;
            background: greenyellow;
        }
    }
</style>

（4）清除文字环绕

而在 BFC 和常规文件流中，文本的 line boxes （文本行） 会因为浮动元素的占据，而收缩空间，当排列到浮动元素没有的区域，就又会紧贴着容器边框。但是，p 标签的背景一直是紧贴着 BFC 容器边框。如果要 p 标签整个一起（包括背景）都不再处于浮动元素的下面，不再紧挨着容器块的左边缘，就需要将 p 标签创建成一个新的 BFC ，比如通过给 p 标签添加 overflow: hiddenl; 来创建一个新的 BFC ，从而解决文字环绕问题.