BFC的使用

Ther19

已于 2023-01-10 14:36:09 修改

阅读量145

点赞数

分类专栏： css 文章标签：前端 html css Powered by 金山文档

于 2023-01-09 16:04:41 首次发布

本文链接：https://blog.csdn.net/weixin_68915174/article/details/128614861

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

面试

2 篇文章 0 订阅

订阅专栏

BFC块级格式化上下文是web页面中一块独立的渲染区域，不会影响周围元素

开启BFC的条件：

float不为none

position:absolute/fixed;

display:inline-block/table-cell/table-caption/flex/inline-flex;

overflow不为visible

布局规则（BFC元素的特点）

在BFC中，盒子从顶部开始垂直排列，盒子垂直方向距离由margin决定

同一个BFC的两个相邻的盒子margin会重叠

BFC不会与float重叠

BFC计算高度也会计算float元素

BFC作用：

清除浮动，解决float脱离文档流高度塌陷问题

但只能用overflow:hidden清除浮动，用其他方式的话，内部浮动可以清除，但父元素本身就脱离标准流，会影响后面的元素

<style>
    .par {
        border: 10px solid pink;
        width: 240px;
    }
    
    .child {
        border: 10px solid greenyellow;
        width: 100px;
        height: 100px;
        float: left;
    }
</style>

<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>

</body>

给父节点激活BFC

<style>
    .par {
        border: 10px solid pink;
        width: 240px;
        overflow: hidden;
    }
    
    .child {
        border: 10px solid greenyellow;
        width: 100px;
        height: 100px;
        float: left;
    }
</style>

<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>

</body>

避免margin重叠（解决margin高度塌陷问题）

正常情况下margin会重叠

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .child {
        border: 10px solid greenyellow;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
</style>

<body>
    <div class="child"></div>
    <div class="child"></div>
</body>

因为属于同一个BFC的两个相邻的元素会发生margin重叠，所以可以设置两个不同BFC来实现margin不重叠

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .child {
        border: 10px solid greenyellow;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
    
    .box {
        overflow: hidden;
    }
</style>

<body>
    <div class="child"></div>
    <div class="box">
        <div class="child"></div>
    </div>
</body>

自适应两栏布局

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .a {
        border: 10px solid pink;
        width: 50px;
        height: 50px;
        float: left;
    }
    
    .b {
        border: 10px solid greenyellow;
        width: 100px;
        height: 100px;
    }
</style>

<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

因为a盒子float：left，使得脱离了标准流，而BFC的区域不会与float 的盒子重叠，可以使b盒子激活BFC实现两栏布局

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .par {
        border: 10px solid pink;
        width: 50px;
        height: 50px;
        float: left;
    }
    
    .child {
        border: 10px solid greenyellow;
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
</style>

<body>
    <div class="par"></div>
    <div class="child"></div>
</body>