BFC真的很简单

coder__Song

已于 2023-04-23 21:01:08 修改

阅读量73

点赞数 1

于 2023-04-09 23:23:18 首次发布

本文链接：https://blog.csdn.net/qq_52214334/article/details/130049116

版权

BFC（BlockFormattingContext）是一种Web页面布局的概念，用于隔离盒模型的内部和外部，防止互相影响。通过设置如overflow:hidden，可以创建BFC，解决元素margin重叠、清除浮动以及实现自适应布局等问题。文章通过实例展示了BFC如何影响和解决CSS布局中的常见问题。

摘要由CSDN通过智能技术生成

BFC真的很简单

一、初步体验BFC

BFC( Block formatting context )翻译过来为"块级格式化上下文"。
简单的来说就是BFC区域内的布局不会影响到外部的布局，先简单的举一个例子：

    <style>
        .box1,
        .box2 {
            width: 100px;
            height: 100px;
        }
        .box1 {
            background-color: red;
            margin-bottom: 100px;//box1添加了一个margin-bottom
        }
        .box2 {
            background-color: blue;
            margin-top: 100px;//box1添加了一个margin-top
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="box1"></div>
    </div>
    <div class="fa">
        <div class="box2"></div>
    </div>
</body>

在这里插入图片描述
非常明显，按道理来说应该两个盒子间隔两个身位的，但是效果却不是，我们就可以利用BFC来解决整个问题

    <style>
        .box1,
        .box2 {
            width: 100px;
            height: 100px;
        }

        .box1 {
            background-color: red;
            margin-bottom: 100px;
        }

        .box2 {
            background-color: blue;
            margin-top: 100px;
        }

        .fa {
            overflow: hidden;//给他们的父盒子添加了overflow:hidden后，就回形成一个BFC
            border: 1px solid #000;//为了方便大家看，给父盒子添加了一个border
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="box1"></div>
    </div>
    <div class="fa">
        <div class="box2"></div>
    </div>
</body>

box1和box2在两个不同的BFC内，所以他们的margin 不会出现之前的那个问题。
相信到这里大家可能对BFC有一点点的了解了，那接下来开始讲概念

二、BFC概念

BFC是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
人话：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

BFC触发的条件
1.浮动的元素（float为left或者right就可以创建BFC）
2.绝对定位元素（元素的 position 为 absolute 或 fixed）
3.display:inline-block，display:table-cell，display:flex，display:inline-flex
4.overflow给了值（除了visible的值）

三、BFC的应用

1.第一个就是最开始我们举得那个例子，那之前是为了方便理解，给两个盒子都设置了BFC，实际上其中一个盒子是BFC就能实现margin互不干扰了。
2.清除浮动

        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 100px;
            float: left;
        }
        .fa {
            overflow: hidden;
            border: 1px solid #000;
        }
        .fa {
            overflow: hidden;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="box1"></div>
    </div>
</body>

在这里插入图片描述

3.实现自适应两栏布局

            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 100px;
            float: left;
        }

        .box2 {
            background-color: pink;
        }

        .fa {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="box1"></div>
        <div class="box2">我是老二我是老二我是老二我是老二我是老二我是老二我是老二我
            是老二我是老二我是老二我是老二我是老二我是老二我是老二我是老二我是老二我是老
            二我是老我是老二我是老二我是老二我是老二我是老二我是老二我是老二我是老二二我
            是老二我是老二我是老二我是老二我是老二我是老二我是老二我是老二我是老二我
            是老二我是老二我是老二我是老二我是老二我是老二我是老二我是老二我是老二我是老
            二我是老我是老二我是老二我是老二我是老二我是老二我是老二我是老二我是老二二我
            是老二我是老二</div>
    </div>

在这里插入图片描述
让老二盒子触发BFC

            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 100px;
            float: left;
        }

        .box2 {
            background-color: pink;
            overflow: hidden;
        }

        .fa {
            border: 1px solid #000;
        }

在这里插入图片描述
5.此外，BFC还能够解决边距塌陷问题

        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 100px；//子元素添加margin-top
        }

        .fa {
            margin-top: 50px;//父元素元素添加margin-top，不会生效，而且会被子元素带下来
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="box1"></div>
    </div>

在这里插入图片描述
让父元素触发BFC

            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 100px;
        }

        .fa {
            margin-top: 50px;
            background-color: pink;
            overflow: hidden;
        }

在这里插入图片描述
总而言之：大家就记住BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。