BFC 的理解

一只小网虫

已于 2022-04-25 22:05:49 修改

阅读量86

点赞数

分类专栏：前端学习文章标签： css html5 html

于 2021-10-05 13:52:24 首次发布

本文链接：https://blog.csdn.net/m0_48407729/article/details/120609610

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、概念

(一) Box

Box 是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个Box组成的。
元素的类型和display属性，决定了这个Box的类型。不同类型的Box，会参与不同的Formatting context(一个决定如何渲染文档的容器)
因此Box内的元素会以不同的方式渲染。

让我们看看有哪些盒子：

block-level box: display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context (块级格式化上下文)。
inline-level box: display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context (行内格式化上下文)。

(二) Formatting context

Formatting context 是 W3C CSS2.1 规范中的一个概念。

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

最常见的 Formatting context 有 Block fomatting context(简称 BFC)和 Inline formatting context(简称 IFC)。

CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

(三) BFC 定义

全称为 块格式化上下文 (Block Formatting Context) 。
一个块格式化上下文（block formatting context）是 Web 页面的可视化 CSS 渲染出的一部分。
它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

总结：BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

二、BFC 布局规则

1、内部的 Box 会在垂直方向，一个接一个地放置；

2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠；

3、每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此；

4、BFC 的区域不会与 float box 重叠；

5、BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；

6、计算 BFC 的高度时，浮动元素也参与计算；

三、如何创建一个块格式化上下文？

根元素(body)或其它包含它的元素。
浮动元素 (元素的 float 不为 none)。
定位元素 (元素具有 position 为 absolute 或 fixed)。
内联块 (元素具有 display: inline-block)。
表格单元格 (元素具有 display: table-cell，HTML 表格单元格默认属性)。
表格标题 (元素具有 display: table-caption, HTML 表格标题默认属性)。
具有 overflow 且值不为 visible 的块元素 (常用 overflow: hidden )。
display: flow-root（在父级块中使用，创建无副作用的 BFC）。
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
flex, inline-flex。

四、BFC 的应用场景

清除元素内部浮动：父元素上设置 overflow: hidden 样式

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .fa {
            width: 100%;
            overflow: hidden;
            border: 2px solid yellowgreen;
        }
        .ch {
            float: left;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <div class="fa box">
        <div class="ch box"></div>
    </div>
</body>
</html>

解决外边距合并问题

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            overflow: hidden;
        }

        .fa {
            width: 100%;
            overflow: hidden;
            margin-top: 135px;
        }

        .ch1 {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            margin-bottom: 20px;
            background-color: tomato;
        }

        .ch2 {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            margin-top: 20px;
            background-color: rgb(71, 203, 255);
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="box">
            <div class="ch1"></div>
        </div>
        <div class="box">
            <div class="ch2"></div>
        </div>
    </div>
</body>

</html>

制作右侧自适应的盒子问题
效果演示如下：

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            overflow: hidden;
        }

        .fa {
            width: 100%;
            overflow: hidden;
            margin-top: 135px;
        }

        .ch1 {
            float: left;
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-bottom: 20px;
            background-color: tomato;
        }

        .ch2 {
            overflow: hidden;
            height: 200px;
            background-color: rgb(71, 203, 255);
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="ch1"></div>
        <div class="ch2">
            fhakjdfakjdsfajkdfnakdslhfalnkdjshfnalkjdsfhnakjsdhakjdshnjkadhsflkajdshfakljdshfnakjshdfnalkjdshfalkjdsfhalksjdhflak
        </div>

    </div>
</body>

</html>