视觉格式化模型-格式化上下文（FC）

BFC（Block Formatting Contexts）块级格式化上下文

1、触发 BFC 的条件

  • 根元素（<html>）
  • 浮动元素：float: left/right/inherit
  • 绝对定位元素：position: absolute/fixed
  • 行内块元素：display: inline-block
  • 表格单元格：display: table-cell
  • 表格标题：display: table-caption
  • 溢出元素：overflow 不为 visible 的值
  • 弹性盒子：display: flex/inline-flex

2、布局规则

此规则只会对内部的块级盒子生效，行内级盒子依然遵循行内格式化上下文（IFC）的规则，不会受到BFC规则的影响

  1. 垂直排列：内部的块级Box会垂直排列
  1. 垂直margin重叠：两个块级Box 垂直方向的距离由 margin 决定。但属于同一个BFC的两个相邻Box的margin会发生重叠

以下例子可以看到，111 和 222 之间的垂直距离不是 40px，而是 20px

Q：解决块级元素垂直方向margin重叠问题

A：让相邻的两个块级盒子不在同一个 BFC 内

  1. 左对齐：BFC内的每个块级盒子的margin box左边，与包含块（BFC容器）的content box左边接触

  2. 不与浮动元素重叠：BFC区域不会与float box重叠，BFC会避开浮动元素

下面 normal-box 默认是非 BFC，当选中 checkbox 后，会给 normal-box 设置 overflow: auto，使 normal-box 形成 BFC，从而不与浮动元素重叠

  1. 高度包含浮动元素：计算BFC高度时，浮动元素也参与计算

IFC（Inline Formatting Contexts）行内级格式化上下文

1、触发 IFC 的条件

当一个块级元素包含行内级元素时，这个块级元素就会形成IFC

当IFC中有块级元素插入时，会产生两个匿名块将元素分割开来，产生两个IFC

<div class="container">
  <span>行内元素1</span>
  <!-- 匿名块盒开始 -->
  <div>块级元素</div>
  <!-- 匿名块盒结束 -->
  <span>行内元素2</span>
</div>

2、布局规则

此规则只会对内部的行内级盒子生效

  1. 水平排列：所有行内元素水平排列
  1. 垂直方向样式不计算：子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】
    • 值得一提的是，垂直方向上的padding会有视觉高度，但是不会有实际高度。实际高度由 line-height 决定

  1. 垂直对齐：在垂直方向上，子元素会以不同形式来对齐（vertical-align）

  2. 行盒：超出块容器宽度的行内元素，默认会自动换行，形成多个行盒

3、应用

  1. 多行文本水平垂直居中

FFC（Flex Formatting Contexts）弹性格式化上下文

1、触发 FFC 的条件

当 display 的值为 flex 或 inline-flex 时，将生成弹性容器

2、布局规则

查看 【css - 布局 - flex】相关文档

GFC（Grid Formatting Contexts）栅格格式化上下文

1、触发 GFC 的条件

当 display 的值为 grdi 或 inline-grid 时，将生成网格容器

2、布局规则

查看 【css - 布局 - grid】相关文档

最近更新:
Contributors: kingmusi