概述

BFC（Block Formatting Context）块级格式化上下文。我并不知道 BFC 是什么，但是只要写出样式，我就知道这是不是 BFC。BFC 没有明确的定义，只有特征或功能。

形成 BFC 条件

  1. 浮动（float: left | right）

  2. 绝对定位元素（position: absolute）

  3. 非块盒的块容器（display: inline-block | table-cells | table-captions）

  4. overflow 不为 visible 的块盒（visible: auto | hidden | scroll）

  5. display: flow-root ==> 专门用于使得当前元素触发 BFC

功能

  1. 将内部浮动元素包裹起来
    使用 BFC 将其内部浮动元素包裹起来
    BFC 将内部浮动元素包裹起来

代码地址

  1. 两个相邻的 BFC 划清界限
    float + div 左右自适应布局
    BFC 两个相邻 BFC 划清界限

代码地址

BFC 与 文档流

BFC 是本身特性，它会影响元素的宽高
文档流指内联元素从左到右排列，块级元素从上到下排列。它会影响元素的排列顺序
二者没有关系
BFC 里面有文档流，BFC 本身也可以是文档流

最佳实践 & 套路

不要去使用 BFC

  1. 清除浮动使用 clearfix

    1
    2
    3
    4
    5
    		 
    clearfix::after{
        content: '';
        display: block;
        clear: both;
    }

  2. 划清界限使用 display: flex
    使用 display: flex + flex: 1
    display: flex + flex: 1

相关知识点

BFC 内部相邻块级元素竖直 margin 合并