块级格式化上下文(面试有用)

最新推荐文章于 2022-02-26 16:06:21 发布

Mr.Envelope?

最新推荐文章于 2022-02-26 16:06:21 发布

阅读量252

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/Mr_Envelope/article/details/103077134

版权

CSS3 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

块级格式化上下文（面试有用）

全称Block Formatting Context ,简称BFC

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

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

BFC渲染区域：

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

根元素意味着，<html>元素创建的BFC区域，覆盖了网页中所有元素；
浮动和绝对定位元素；
overflow属性不等于visible的块盒（如hidden,auto），等。

独立性

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

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

创建BFC的元素，它的自动高度需要计算浮动元素;
创建BFC的元素，它的边框盒不会与浮动元素重叠;
创建BFC的元素，不会和它的子元素合并外边距。

作用1：解决高度坍塌overflow:hidden;不过不建议如此使用，也许会产生部分副作用。

<!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>
        .container{
            background: lightblue;
            /* float: left; */
            /* position: absolute; */
            /* 副作用最小的方式↓ */
            /* overflow: hidden; */
        }
        
        .clearfix{
            overflow: hidden;
        }
        /* .clearfix::after{
            content: "";
            display: block;
            clear: both;
        } */
        .item{
            float: left;
            width: 200px;
            height: 200px;
            margin: 20px;
            background: rebeccapurple;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

作用2：固定左边栏，右边自适应。

<!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>
        .float{
            width: 200px;
            height: 200px;
            margin: 20px;
            margin-right: 100PX;
            background: red;
            float: left;
        }
        .container{
            height: 500px;
            background: darkblue;
            /* BFC */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="float"></div>
    <div class="container"></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>
        .container{
            background: #008c8c;
            height: 500px;
            margin-top: 30px;
            overflow: hidden;
        }
        .child{
            height: 100px;
            margin:30px 60px;
            background: darkgoldenrod;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>
</html>

注：块级格式化只对常规流有用，对绝对定位毫无作用。

Mr.Envelope?

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
块级格式化上下文(面试有用)

块级格式化上下文（面试有用）全称Block Formatting Context ,简称BFC它是一块独立的渲染区域，它规定了该区域中，常规流块盒的布局常规流块盒在水平方向上，必须撑满包含块；常规流块盒在包含块的垂直方向上依次摆放；常规流块盒若外边距无缝相邻，则进行外边距合并；常规流块盒的自动高度和摆放位置，无视浮动元素。BFC渲染区域：这个区域由某个HTML元素创建，以下元...
复制链接

扫一扫

专栏目录