简述BFC的原理及其应用

沈行的专栏

已于 2022-10-24 11:02:25 修改

阅读量544

点赞数

分类专栏：前端文章标签： css html html5 1024程序员节

于 2021-09-15 22:01:47 首次发布

本文链接：https://blog.csdn.net/walk_man_3/article/details/120317783

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

一、常见定位方案

（1）普通流

元素按照其在html的先后位置由上而下布局。

（2）浮动布局（float）

元素先按照普通流的位置出现，然后根据浮动方向尽可能的向左或向右偏移。

（3）绝对定位（absolute）

在绝对定位布局中，元素会脱离文档流。

二、BFC概念

BFC块级格式上下文，属于定位方案中的普通流。

具有BFC特性的元素可以看作是隔了的独立容器，容器里的元素不会在布局上影响到外面的元素。简单的说：可以理解BFC是要给封闭的大箱子，箱子内的元素无论如何交换，都不会影响到外面的元素。

三、BFC触发条件以及规则

1、body根元素；

2、浮动元素float的值不为none；

3、绝对定位元素：positon（absolute、fixed）；

4、display的值为：display（block、inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid）；

5、overflow：除了visible以外的值；（hidden、scroll、auto）；

四、应用场景

利用BFC的特性，我们将BFC应用在以下场景：

防止margin重叠（塌陷）

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <p>Hehe</p >
</body>

页面显示如下：

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。

前面讲到，同一个BFC的俩个相邻的盒子的margin会发生重叠

可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠

<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>

这时候，边距则不会重叠：

清除内部浮动

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

页面显示如下：

而BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生活才能BFC，则内部浮动元素计算高度时候也会计算

.par {
    overflow: hidden;
}

实现效果如下：

自适应多栏布局

这里举个两栏的布局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果图如下：

前面讲到，每个元素的左外边距与包含块的左边界相接触

因此，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触

而BFC的区域不会与浮动盒子重叠

所以我们可以通过触发main生成BFC，以此适应两栏布局

.main {
    overflow: hidden;
}

这时候，新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度，和.aside的宽度，自动变窄

效果如下：

小结

可以看到上面几个案例，都体现了BFC实际就是页面一个独立的容器，里面的子元素不影响外面的元素。

沈行的专栏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简述BFC的原理及其应用

一、常见定位方案（1）普通流元素按照其在html的先后位置由上而下布局。（2）浮动布局（float）元素先按照普通流的位置出现，然后根据浮动方向尽可能的向左或向右偏移。（3）绝对定位（absolute）在绝对定位布局中，元素会脱离文档流。二、BFC概念BFC块级格式上下文，属于定位方案中的普通流。具有BFC特性的元素可以看作是隔了的独立容器，容器里的元素不会在布局上影响到外面的元素。简单的说：可以理解BFC是要给封闭的大箱子，箱子内的元素无论如何交换，都不会影响到外面的元
复制链接

扫一扫

专栏目录