块级格式化上下文

最新推荐文章于 2022-07-26 19:04:42 发布

081&33

最新推荐文章于 2022-07-26 19:04:42 发布

阅读量98

点赞数

本文链接：https://blog.csdn.net/weixin_51398691/article/details/114182010

版权

块级格式化上下文

全称Block Formatting Content,简称BFC。

它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局

常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，无视浮动标签，定位标签

BFC渲染区域：

这个区域由某个HTML标签创建，以下标签会在其内部创建BFC区域：

根标签意味着 <html>标签创建的BFC区域，覆盖了网页中所有的标签

浮动和绝对定位，固定定位标签
overflow不等于visible的块盒（溢出）
display不等于table

独立的

不同的BFC区域，它们进行渲染时互不干扰

创建BFC的标签，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

具体规则：

创建BFC的标签，他的自动高度需要计算浮动标签，因为要内部和外部的联系

1.亮蓝色背景消失不见，原因是高度坍塌，以前是加上clearfix
.clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
<div class="container clearfix">

|--|--||--|--||--|--||--|--||--|--||--|--||--|--||--|--||--|--||--|--|

 .container{
            background: lightblue;
        }
        .item{
            float: left;
            width: 200px;
            height: 200px;
            margin: 20px;
            background: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>
2.让<div class="container">```创建bfc
  1）.container{
            background: lightblue;
            position: absolute;
        }
        
  2）   .container{
            background: lightblue;
            float: left;
        }
  3）.container{
            background: lightblue;
            overflow: hidden;
        }
     
    还是建议使用清除浮动

创建BFC的标签，它的边框盒不会与浮动标签重叠·

.float{
            width: 200px;
            height: 200px;
            margin: 20px;
            background: lightgreen;
            float: left;
        }
        .container{
            height: 500px;
            background: lightpink;
            overflow: hidden;
            //创建BFC,会避开浮动标签，如果想调整两个之间的距离，可以调整浮动盒子的margin-right
        }
    </style>
</head>
<body>
    <div class="float"></div>
    <div class="container"></div>
</body>
</html>

没加overflow
在这里插入图片描述
加了overflow

创建BFC的标签，不会和它的子标签进行外边距合并，即不同的BFC，外边距不会合并，处在同一个BFC，外边距会合并。

    <style>
        .container{
            background: lightblue;
            height: 500px;
            margin-top: 30px;
        }
        .child{
            height: 100px;
            margin: 50px;
            background: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
    <div class="child"></div>
</div>

在这里插入图片描述

    <style>
        .container{
            background: lightblue;
            height: 500px;
            margin-top: 30px;
            overflow: hidden;
        }
        .child{
            height: 100px;
            margin: 50px;
            background: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
    <div class="child"></div>
</div>