【前端知识之CSS】对BFC的理解

饭啊饭°

已于 2022-07-18 09:36:50 修改

阅读量322

点赞数 1

分类专栏：前端知识之html+CSS 文章标签：前端面试 css

于 2022-05-11 15:44:33 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/124709314

版权

前端知识之html+CSS 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍对BFC的理解。

文章目录

前言
一、什么是BFC
二、触发条件
三、使用场景

一、什么是BFC

相关概念：
Box是CSS布局对象的基本单位，一个页面由多个Box组成，就是之前说过的盒子模型。
Formatting context：格式化上下文，是页面中一块渲染区域，有一套自己的渲染规则，决定了其子元素如何定位，以及和其他元素的交互限定区域。
BFC（Box Formatting context）：块级格式化上下文是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
渲染规则：
（1）内部的盒子会在垂直方向上一个接一个的放置
（2）对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
（3）每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
（4）BFC的区域不会与float的元素区域重叠
（5）计算BFC的高度时，浮动子元素也参与计算
（6）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC的目的：形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。

二、触发条件

触发BFC的条件包括但不限于：

根元素，即body。
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed

三、使用场景

1、防止margin重叠（塌陷）

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align: center;
        margin: 100px;
    }
</style>
<body>
    <p>A</p>
    <p>B</p>
</body>

在这里插入图片描述
如果两个盒子的margin不一样大的话，距离为大的值。这就是前面讲到的(2）对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。要想避免这种情况，就要把两个p放在不同的BFC中，那么可以把p外面包上一个div，再触发它，就在两个BFC中了。

<style>
    div {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align: center;
        margin: 100px;
    }
</style>
<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
</body>

在这里插入图片描述

2、清除内部浮动

<style>
    .box2 {
        width: 100px;
        height: 100px;
        border: 5px solid black;
        float: left;
    }
</style>
<body>
    <div class="box">
        <div class="box2"></div>
        <div class="box2"></div>
    </div>
</body>

在这里插入图片描述
由于浮动元素没有高度，因此此时body也是没有高度，但由于（5）计算BFC的高度时，浮动子元素也参与计算。因此要使两个box2在同一个BFC中。触发.box盒子。

.box {
    overflow: hidden;
}

在这里插入图片描述

3、自适应多栏布局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>