如何理解BFC（块级格式化上下文）

最新推荐文章于 2023-03-09 04:51:16 发布

weixin_45070265

最新推荐文章于 2023-03-09 04:51:16 发布

阅读量390

点赞数 1

分类专栏： HTML/CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45070265/article/details/122015553

版权

HTML/CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、什么是BFC？

BFC是(Block Formatting Context)块级格式化上下文,BFC是css布局的一个概念，是一个环境，创建了BFC的元素的子元素不会受外面其他元素的影响。

二、如何创建BFC？

html根元素默认会创建BFC
overflow:非visible
display:inline-block
position: absolute/fixed
float: 非none
display: table-cell、flex、inline-flex

三、开启BFC的作用

1.解决使用Float脱离文档流，高度塌陷问题

使用BFC让浮动元素参与父元素的高度计算
BFC在页面上是一个隔离的容器，不会与浮动框发生重叠

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            background: blanchedalmond;
            margin-top: 20px;
        }
        .clearFloat{
            /* 通过设置overflow开启BFC，一般没什么问题 */
            /* overflow: hidden; */

            /* 通过设置浮动/position开启BFC，存在的问题是：父元素的高度丢失 */
            /* float: left; */
            /* position: absolute; */
        }
        .clearFloat::after{
            content: "";
            display: block;
            clear: both;
        }

        .inner {
            width: 100px;
            height: 100px;
        }

        .fl {
            float: left;
        }

        .child1 {
            background-color: cornflowerblue;
        }

        .child2 {
            background-color: darkcyan;
        }
    </style>
</head>

<body>
    <div class="box clearFloat">
        父元素高度，给父元素创建BFC，使得浮动元素参与父元素的高度计算
        <div class="fl inner child1">我左浮动1号</div>
        <div class="fl inner child2">我左浮动2号</div>
    </div>
    <div class="box">
        父元素高度，浮动元素没有参与父元素的高度计算
        <div class="fl inner child1">我左浮动1号</div>
        <div class="fl inner child2">我左浮动2号</div>
    </div>
</body>

</html>

在这里插入图片描述

2.解决Margin边距重叠
先说明：什么情况会发生重叠？
所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。其中【毗邻】的定义为同级或者嵌套的盒子元素，并且它们之间没有非空内容、padding或border分隔。
* 属于同一个BFC的两个相邻Box的margin会发生重叠
* 父子元素紧挨着(它们之间没有非空内容、padding或border分隔),margin也会发生重叠(子元素的外边距会传递给父元素)
再说：如何解决？
为margin重叠的两个元素分别包裹一个盒子，给此盒子创建BFC形成一个完全独立的空间，从而使得BFC里面元素不受外面布局影响

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background: blanchedalmond;
            /* overflow: hidden; */
        }

        .inner {
            width: 100px;
            height: 100px;
        }

        .wrapper {
            /* 开启BFC使得子元素不受其他元素的影响 */
            overflow: hidden;
            /* display: flex; */
        }

        .child1 {
            background-color: brown;
            /* float: left; */
            margin-bottom: 10px;

        }

        .child2 {
            background-color: chocolate;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <strong>margin重叠</strong> 
        <!-- 这里的两个inner设置的margin重叠了：**属于同一个BFC的两个相邻Box的margin会发生重叠** -->
        <div class="inner child1">盒子1-设置了margin-bottom:10px</div>
        <div class="inner child2">盒子2-设置了margin-top:10px</div>
    </div>
    <hr>
    <div class="box1">
        <strong>margin不重叠</strong> 
        <!-- 给使用(overflow:hidden;)给wrapper创建了BFC使得内部元素不受外部元素的影响,从而解决了子元素margin重叠问题 -->
        <div class="wrapper">
            <div class="inner child1">盒子1-设置了margin-bottom:10px</div>
        </div>
        <div class="wrapper">
            <div class="inner child2">盒子2-设置了margin-top:10px</div>
        </div>
    </div>
</body>

</html>

在这里插入图片描述

3.实现自适应两栏布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
        }

        .left,
        .right {
            height: 100%;
        }

        .left {
            background: blanchedalmond;
            /* opacity: 0.2; */
            width: 200px;
            float: left;
        }

        .right {
            background-color: darkcyan;
            /* 使得内部元素不受外部元素影响 */
            overflow: hidden;
        }

        ul {
            list-style: none;
            padding-left: 0;
        }

        ul img {
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="left">固定区域</div>
    <div class="right">自适应区域</div>
</body>

</html>

在这里插入图片描述

4.防止字体环绕

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            background-color: pink;
        }

        img {
            float: left;
            height: 100px;
        }

        .notAround {
            /* 开启BFC解决文字环绕问题 */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../../imgMark/test.jpg" alt="">
        <div>
            <p>木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木
            </p>
        </div>
    </div>
    <div class="box">
        <img src="../../imgMark/test.jpg" alt="">
        <div class="notAround">
            <p>
                木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木
            </p>
        </div>
    </div>
</body>

</html>

在这里插入图片描述

weixin_45070265

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
如何理解BFC（块级格式化上下文）

一、什么是BFC？BFC是(Block Formatting Context)块级格式化上下文,BFC是css布局的一个概念，是一个环境，创建了BFC的元素的子元素不会受外面其他元素的影响。二、如何创建BFC？html根元素默认会创建BFCoverflow:非visibledisplay:inline-blockposition: absolute/fixedfloat: 非nonedisplay: table-cell、flex、inline-flex三、开启BFC的作用1.解决使
复制链接

扫一扫

专栏目录