格式化上下文 | 任先生的笔记库

官方

w3c (opens new window)

MDN 描述 (opens new window)

参考

传智教育 (opens new window)

github (opens new window)

# 格式化上下文：

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

Formatting context 是 W3C CSS2.1 (opens new window) 规范中的一个概念。

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

提示

CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 G（grid）FC 和 F(flex)FC。

# 一、BFC 是什么？

BFC(block formatting context)，即块状格式化上下文，一个 BFC 区域包含创建该上下文元素的所有子元素，但不包括其他 BFC 区域的子元素。

BFC 是一块块独立的渲染区域，其内部的元素不会影响到外部的其他元素，外部元素也不能影响到 BFC 内部的元素。

总结

BFC 理解简述：
BFC 是一个独立的布局环境，其内部的元素与外界互不影响（概念性的东西）

# 1、BFC 的触发条件

创建块格式化上下文的方式，简要的整理如下（完整版的可以查看 MDN (opens new window)）：

① 根元素

<html>
  <!-- html页面其实就是一个大的BFC容器 -->
</html>

② float、position、display

body {
  /* 1、float */
  /* 除了none（即：只要设置了） */
  float: left / right;
  float: inline-start / inline-end;

  /* 2、position */
  position: absolute;
  position: fixed;

  /* 3、display */
  display: inline-block; /* 行内块 */
  display: flow-root; /* new一个BFC🤔 */
  display: flex / inline-flex; /* 弹性元素 */
  display: grid / inline-grid; /* 网格元素 */
  display: table-cell / table-caption / ……; /* 表格相关 */
}

③ overflow

body {
  /* 除了visible、clip */
  overflow: hidden;
  overflow: scroll;
}

浮动元素（float 值不为 none）
绝对定位元素（position 值为 absolute 或 fixed）

# 2、BFC 的布局规则

内部的块会在垂直方向上一个接一个的放置

🚩 垂直方向上的距离由 margin 决定（属于同一个 BFC 的两个相邻子 Box 的 margin 会 👀 发生重叠 —— margin 塌陷）

<style>
  p {
    height: 100px;
    width: 200px;
    background-color: aliceblue;

    margin: 50px;
  }

  .solve {
    overflow: hidden; /* 解决塌陷问题① */
  }
</style>
<body>
  <!-- 新建一个BFC环境 -->
  <div class="solve"><p>上面的盒子</p></div>
  <p>下面的盒子</p>
</body>

<style>
  ul {
    display: inline-block; /* 解决塌陷问题② */
    margin: 10px;
    background: lightblue;
  }
</style>
<body>
  <div></div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>

🚩BFC 块状元素和浮动元素挨着显示而不会重叠（清除浮动）

BFC 块状元素的 margin-left 和其包含块的 border-left 紧贴

计算 BFC 的高度时，浮动元素也会参与计算

<style>
  .par {
    border: 5px solid #fcc;
    width: 300px;
    /* height: 100px; 没有设置高度，子盒子float无法撑大父盒子 */

    overflow: hidden; /* 清除浮动 */
  }

  .child {
    border: 5px solid #f66;
    width: 100px;
    height: 100px;
    float: left;
  }
</style>
<body>
  <div class="par">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

双栏布局

BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素

# 二、IFC 是什么？

官方

w3c (opens new window)

通常情况下，还是建议少用 inline-block进行布局。

在线示例 (opens new window)

规则 1

在行盒与行盒之间，相邻元素建存在空白字符，则会出现空白折叠。

<!-- 示例1 -->
<div>
  <span>任</span>
  <span>先生</span>
</div>

<!-- 示例2 -->
<div><span>任</span><span>先生</span></div>

但是在实际项目开发中，通过打包压缩后，元素间是不存在空白字符的。

所以，如果我随意所以inline-block进行布局的话，会造成开发环境和生产环境的效果不一致了。

规则 2

行盒与行盒之间的排列默认是水平基线对齐的

<div>
  <span>水平基线对齐</span>
  <img src="https://picsum.photos/100/100" alt="" />
</div>

规则 3

行盒元素会绕开浮动元素环绕排列

<div>
  <div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <span>任</span>
  <span>先生</span>
</div>

← CSS元素类型【Bootstrap3】 →