BFC的简单理解及应用

最新推荐文章于 2022-11-20 20:44:43 发布

蓝散bennkyo

最新推荐文章于 2022-11-20 20:44:43 发布

阅读量360

点赞数

分类专栏：学习笔记文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45716124/article/details/114447661

版权

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、什么是BFC

BFC，全称：Block formatting context，意思是“块级格式化上下文”。

它是一个块级的独立的渲染区域，并且这个区域与该区域的外部毫不相干，即：在这一块级封闭区域中的元素，无论怎么摆放，都不会影响到区域外其他元素的布局。

二、形成BFC的条件

float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

具备以上任意一条均可生成BFC。

三、BFC具有的特性

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

四、BFC部分特性的理解及应用

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（应用：解决外边距重叠问题）

看代码，html部分：

<body>
    <div id="father">
        <div id="son1">1</div>
        <div id="son2">2</div>
        <div id="son3">3</div>
    </div>
</body>

css部分：

#father{
    height: 300px;
    background-color: #CFCFCF;
    overflow: hidden;  /* overflow不为visible生成BFC，其他条件同理 */
}
#son1,#son2,#son3{
    margin: 20px; /* 注意此时子元素的外边距均是20px */
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
#son1{background-color: #99bbad;}
#son2{background-color: #ebd8b7;}
#son3{background-color: #c6a9a3;}

我们看一下BFC中子元素的外边距：

在这里插入图片描述

可以看到，此时子元素1与子元素2的margin发生重叠，如若两子元素的magin值不一致，则取两者之间的最大值。那怎么消除外边距合并呢？ 此时两个元素位于同一个BFC当中，只要将两个元素分别放到两个不同的BFC当中就行了。

对上面的代码做改进，看代码，html：

<body>
    <div id="father">
        <div id="son1">1</div>
        <!-- 给son2外面套了个father2 -->
        <div id="father2">
            <div id="son2">2</div>
        </div>
        <div id="son3">3</div>
    </div>
</body>

让father2形成新的BFC：

#father2{ overflow: hidden; }

在这里插入图片描述

发现此时子元素2的外边距已经不紧贴这子元素1与子元素3了，解决了外边距合并的问题。

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

在这里插入图片描述

上面这句话什么意思？大致就是子元素的左边默认情况下会紧贴着BFC父元素的内边框，即子元素的作用范围是父元素的padding范围内，如上图的绿色+蓝色部分。

看代码，html部分：

<body>
    <div id="father">
        <div id="son1">1</div>
    </div>
</body>

css部分：

#father{
    height: 300px;
    background-color: #CFCFCF;
    border: 20px solid black; /* 给包含块加上边框 */
    overflow: hidden; 
}
#son1{
    width: 100px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    background-color: #99bbad;
}

在这里插入图片描述

BFC的区域不会与float box重叠。

看代码，html部分：

<body>
    <div id="father">
        <div id="son1">1</div>
        <div id="son2">2</div>
    </div>
</body>

css部分：

#father{
    height: 500px;
    background-color: #CFCFCF;
}
#son1{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #99bbad;
}
#son2{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background-color: #ebd8b7;
}

在这里插入图片描述

此时让子元素1左浮动

#son1{ float：left；}

在这里插入图片描述

发现此时元素1浮动后脱离文档流，与元素2发生了重叠，此时让元素2形成BFC，就不会发生重叠了。

#son2{ float: left; /* float属性不为none生成BFC，使用其他条件同理 */ }

在这里插入图片描述

计算BFC的高度时，浮动元素也参与计算（应用：清除浮动）

看代码，html部分：

<body>
    <div id="father">
        <div id="son1">1</div>
        <div id="son2">2</div>
    </div>
</body>

css部分：

#father{
    /* 此时不给父元素设置高度 */
    border: 10px solid black;
    background-color: #CFCFCF;
}
#son1,#son2{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
#son1{background-color: #99bbad;}
#son2{background-color: #ebd8b7;}

在这里插入图片描述

父元素原本没有设置高度，依据子元素的高度进行撑开，此时我们给两个子元素都设置浮动：

#son1,#son2{ float:left;}

在这里插入图片描述

这个时候发现问题了，浮动后元素都脱离了文档流，父元素没有依据撑开，此时父元素是没有高度的。要解决这个问题只需要把父元素设置成BFC就可以了。

#father{  overflow: hidden; /* overflow不为visible生成BFC，其他条件同理 */}

在这里插入图片描述

蓝散bennkyo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
BFC的简单理解及应用

一、什么是BFCBFC，全称：Block formatting context，意思是“块级格式化上下文”。它是一个块级的独立的渲染区域，并且这个区域与该区域的外部毫不相干，即：在这一块级封闭区域中的元素，无论怎么摆放，都不会影响到区域外其他元素的布局。二、形成BFC的条件float属性不为noneposition为absolute或fixeddisplay为inline-block, table-cell, table-caption, flex, inline-flexoverflow不
复制链接

扫一扫