正常文档流布局（兼容所有浏览器）
按照元素在文档中的出现顺序与书写方向（write-mode），搭配盒模型进行布局。
基于position 的布局（IE 不兼容position：sticky）
通过修改元素的position 来实现一些特殊布局效果。
基于float 的Multicol 布局（几乎兼容所有浏览器）
- float：none/left/right 用于指定浮动方向，元素会朝对应方向移动，直到碰到容器边缘或另一个float 元素；float 元素会脱离正常文档流，并创建BFC；float 元素的display 可能被强制改为block，且对flex/inline-flex 元素无效。
- clear：none/left/right/both 用于清除当前BFC 中的前置float 元素的影响，且该元素为非float 元素时，垂直方向的外边距将会折叠；
网格布局（IE 10 使用-ms-前缀实现了旧版规范）
一种二维布局方式，通过display：grid 将元素设置为网格盒子，其直接子元素为grid item，大体上由行（row）和列（column）及之间的间隙（gap）构成，由行/列分割线隔离开，可以基于分割线或区域放置grid item，以下为主要属性：
- grid-template-rows/columns：number 用于定义显式网格的row/column，可以组合repeat 函数和表示可用空间比例的单位fr 来配置多个行/列（如repeat(12, 1fr)），搭配minmax 函数还可以实现行/列的数量与大小随grid 盒子大小自适应的效果（如repeat(autofill, minmax(200px, auto))）；
- grid-auto-rows/columns：number 用于定义隐式网格，使用同上；
- grid-row/column-gap：length 用于定义行/列的间隙大小，最新标准中可以省略grid-前缀；
- grid-row/column-start/end：number 用于定义行/列从哪条分割线开始，到哪条分割线结束，开始/结束线的位置由writing-mode 决定，开始线序号为1，负值表示倒数；
- grid-row/column：number 是grid-row/column-start/end 的简写属性，start和end之间以/分割；
- grid-template-areas：string 用于定义网格的布局，使用英文句号 . 标识空白区域；
- grid-area：string 用于定义grid item 的位置，值为grid-template-areas 中定义好的变量名；
弹性布局（IE 8 使用-ms-flexbox 前缀实现了旧版规范；IE 11 中inline block 元素会被错误定位）
一种一维布局方式，通过display：flex 将元素设置为弹性盒子，其直接子元素为flex item，弹性盒子有两根轴线——主轴和交叉轴（main axis & cross axis），默认情况下主轴方向为从左到右，交叉轴从上到下，flex item 按主轴方向排列，默认不会换行，以下为主要属性：
- flex-direction：row/row-reverse/column/column-reverse 用于指定主轴方向；
- flex-wrap：nowrap/wrap/wrap-reverse 用于指定flex item 显示不下时是否换行；
- justify-content：flex-start/flex-end/center/space-bettween/space-around 用于指定主轴方向flex-item 如何对齐；
- align-items：flex-start/flex-end/center/stretch 用于指定交叉轴方向flex-item 如何对齐；
- align-self：flex-start/flex-end/center/stretch 用于指定flex item 在flex box 中如何对齐，将覆盖align-items；
- flex-shrink：number 用于指定flex item 在空间不足时如何缩小；
- flex-grow：number 用于指定flex item 在有剩余空间时如何放大；
- flex-basis：length 用于指定flex item 的基础宽度；
- flex-flow：flex-direction和flex-wrap 的简写属性；
- flex：flex-grow flex-shrink flex-basis 的简写属性，none（0 0 auto），initial（0 1 auto），auto（1 1 auto）；
- order：number 用于控制flex item 的排列顺序，值越小越靠近main start，默认为0；
注：flex的简写语法有三种：
- 单值：
- number：设置flex-grow的值，默认shrink：1，basis：0；
- width（如10px）：flex-basis的值，默认grow：1，shrink：1；
- 双值：
- number number：依次为grow、shrink；
- number width：依次为grow、basis，默认shrink：1；
- 三值：依次为flex-grow、flex-shrink、flex-basis；
Multicol 布局（IE 10 +）
- column-count：number 用于指定列的数量；
- column-width：length 用于指定列的最小宽度，剩余空间将被所有列平分；
- column-gap：length 用于指定列之间的间隙；
- column-rule：取值同border，用于指定列之间的分割线，分割线不占用宽度，位于column-gap 中；
- break-inside：avoid 可以避免列的内容溢出并换到下一列时被截断；
- page-break-inside：avoid 同上，旧版本浏览器中使用的属性，一起使用增强跨浏览器兼容性。