Box: CSS 布局的基本单位
Box 是 CSS 布局的对象, 和基本单位, 直观点来说, 就是一个页面是由很多个 Box 组成的. 元素的类型和 display 属性, 决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器), 因此 Box 内的元素会以不同方式渲染.
盒子的类型:
- block-level:
display:block的 block, list-item, table 元素会形成 block-level box, 并参与 Block formatting context. - inline-level box:
display:inline的 inline-block, inline-table 元素会形成 inline-level box, 并参与 inline formatting context; - run-in box: CSS3 才有, 略;
Formatting Context
Formatting Context 是 W3C CSS2.1 规范中的一个概念, 是页面中的一块渲染区域, 并有一套渲染规则, 决定了其子元素如何定位, 以及其他元素的关系和相互作用. 最常见的的 Formatting Context 有 Block Formatting Context(BFC) 和 Inline Formatting Context(IFC).
CSS2.1 中只有 BFC 和 IFC, 在 CSS3 中添加了 GFC 和 FFC
BFC 的定义
BFC 直译为”块级格式上下文”, 是一个独立的渲染区域, 只有 Block-level Box 可以参与, 他规定了内部的 Block-level Box 如何布局, 并且与这个区域外部毫不相干.
BFC 布局规则
- 内部的 Box 会在垂直方向依次排列
- Box 垂直方向的距离由 margin 决定, 属于同一个 BFC 的两个相邻的 Box 的 margin 会发生坍塌
- BFC 内部不会发生 float box 重叠
- BFC 就是页面上的一个隔离的独立容器, 容器内的子元素不会影响到外部的元素, 反之亦然
- 计算 BFC 高度的时候, 浮动元素也参与计算(使用 border 消除父元素坍塌的原理)
- BFC 内部每一个 Box 的左外边缘(margin-left)会碰触容器的左边缘(border-left)(如果是从右向左的格式, 则是碰触右边缘)
BFC 的通俗理解
BFC 容器是一个独立的箱子, 里面的元素的布局不受外部元素影响.
我们往往利用这个特性来消除浮动元素对其他非浮动的兄弟元素及其子元素带来的影响.
并且在一个 BFC 容器中, 块盒和行盒都会沿其父元素的边框排列
BFC 成因
- float 属性不为 None;
- position 为 Absolute 或 Fixed
- display 为 inline-block, table-cell, table-caption, flex, inline-flex
- overflow 不是 visible
