历史文章

第一篇

02 布局定位

分为常规流、弹性盒子、Grid、定位

概述

CSS3前：

1. 常规流（Normal Flow）：默认的布局方式，有块级格式化上下文和内联格式化上下文
2. 浮动流（Float）：用float属性控制，脱流，做横向布局
3. 定位流（Positioning）：用position属性控制，fixed和absolute脱离文档流，可以自由定位、覆盖等

CSS3后：

1. Flex弹性盒子布局：一维空间布局，本人最常用的布局
2. Grid网络布局：二维空间布局
3. Multicol多列布局：文本、内容的多列展示

常规流布局

任意盒子的display：

外部显示类型（display-outside）：规定来该盒子如何与同一格式上下文的其他元素一起显示。

内部显示类型（display-inside）：规定了该盒子内部的布局方式。比如display：flex，其外部显示是block，参与BFC；display：inline-flex，则外部显示是inline，参与IFC。它们内部的盒子都参与弹性盒子布局。

块级格式化上下文

格式化上下文的布局规范为：

在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由"margin"属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合(如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合)。

BFC是什么？

BFC本身是block formatting context的缩写，是一种格式规范。如果说一个盒子是BFC或者有BFC特性，那么BFC表示的是block formatting context root。不管它外部显示类型是什么，但是它的内部显示类型是flow-root，其实就是这个盒子内部形成了一个新的块级格式化上下文。

如何触发一个盒子的BFC特性?以下条件满足任何一个即可

• display: flow-root | inline-block;
• position: absolute | fixed;
• float: 不为none;
• overflow: 不为visible

未完待续...