前言

这是一篇笔记，因为一直对这部分的知识看了就忘，今天闲着无事翻了翻不少资料，所以有了这篇文章

怎么理解BFC

首先，我们要知道BFC的全称是Block Formatting Context，翻译成中文是块级格式化上下文，这里介绍下怎么理解Formatting Context，Formatting Context实际上是一种上下文环境，在这个上下文里的元素会与外界隔离，并且按照这个上下文里的规则排序和渲染，Block Formatting Context就是一种上下文，其他上下文还有

  • Inline formatting context : 行内格式化上下文
  • flex formatting context : 设置了display为flex创建的上下文
  • grid formatting context : 设置了display为grid创建的上下文

怎么创建BFC

常见：

  • 根元素（html元素）
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • overflow 值不为 visible 的块元素
  • 行内块元素（元素的 display 为 inline-block
  • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
  • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

不常见：

  • 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）

  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）

  • 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）

  • display 值为 flow-root 的元素

  • contain 值为 layout、content 或 paint 的元素

  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）

  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

BFC内部的元素排序规则

  • 在普通流下的BFC内部的块级盒会在垂直方向上一个接一个排列。
  • 同一BFC下的相邻块级元素会发生垂直方向的外边距折叠
  • BFC是一个独立的容器外面的元素不会影响BFC内部反之亦然。

形成了BFC元素的特殊性质

  • 计算BFC元素的高度时，浮动元素也会参与计算。
  • 浮动盒的区域不会和BFC元素重叠。

BFC的常见用处

自适应两栏布局

利用的是浮动盒的区域不会和BFC元素重叠这个特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    .left {
        width: 100px;
        height: 200px;
        background-color: darkseagreen;
        float: left;
    }
    .right {
        height: 200px;
        background-color : cornflowerblue;
		// 触发BFC 让这个div不和左边的的div重叠
        overflow: hidden;
    }
</style>
<body>
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>

处理margin重叠

因为同一BFC下的相邻块级元素会发生垂直方向的外边距折叠，所以只要让两个块元素不在同一个BFC下就可以处理margin重叠的问题了

兄弟元素间的margin重合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .p {
        background: aquamarine;
        margin: 100px 0;
        height: 100px;
    }
    .wrapper {
	    // 触发BFC
        overflow: hidden;
    }
</style>
<body>
    <p class="p">p1</p>
    <div class="wrapper">
        <p class="p">p2</p>
    </div>
</body>

父子元素间的margin重合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p {
            background: aquamarine;
            margin: 100px 0;
            height: 100px;
        }
        .wrapper {
            overflow: hidden;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
<!--    <p class="p">p1</p>-->
    <div class="wrapper">
        <p class="p">p2</p>
    </div>
    <div>rua</div>
<!--    <p class="p">p1</p>-->
</body>
</html>

处理浮动引起的高度塌陷

这里使用的是计算BFC元素的高度时，浮动元素也会参与计算这个特性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    .container {
        border: 1px solid black;
        overflow: hidden;
    }
    .left {
        width: 100px;
        height: 150px;
        background-color: darkseagreen;
        float: left;
    }
</style>
<body>

<div class="container">
    <div class="left">left</div>
</div>
</body>

参考链接

MDN-BFC
MDN-IFC
MDN-forrmat context
行内格式化上下文介绍
什么是BFC