CSS常见布局如下图所示:

CSS3之后的新增布局

文档流布局（或称常规流）是默认的布局方式，常规流中的盒子分为块级盒子（block）和内联级盒子（inline）

块级盒子参与BFC（Block Formatting Content块级格式上下文）

内敛级盒子参加IFC(Inline Formatting Content内联级格式上下文)，常规流中的所有元素都会以这种布局方式运作。

也就是：块元素独占一行（左），行内元素共享一行（右）

在不满足于这样的块,行布局的情况下，产生了脱离文档流的布局，以下浮动和定位都是“脱标”

面试点：什么是BFC？如何触发一个BFC特性？外边距塌陷？如何解决？

下列元素会脱离常规流：

"浮动的本质就是为了实现文字环绕效果 ——《CSS世界》"

把一个元素“浮动”(float) 起来，会改变该元素本身和在文档布局流中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从文档布局流中移除，这时候其他的周围内容就会在这个被设置浮动float的元素周围环绕

用浮动布局搭建的网页结构

浮动布局的容错性很差，缺少弹性，一旦某列高度变高了，整个列表就会产生布局错位，牵一发而动全身 所以在CSS3出现了类似flex弹性布局这种更自适应的布局

定位 position 能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置。

但它并不是一种用来做主要页面布局的方式，而更像是管理和微调页面中的一个特殊项的位置

定位类型一共有五种static,relative，absolute，fixed,sticky

定义 static是position属性的默认值

特点 如果省略position属性，浏览器就认为该元素是static定位，页面按照默认的文档流布局

使用注意点 这个时候top，right，bottom 和 left，z-index五个属性是无效的

定义图

在static的基础上，有一个相对的基点（如下图蓝色的点）

特点

不脱离文档流的布局，只改变自身的位置，在文档流原来的位置遗留空白区域（下面浅色的框框位置还是在的）

定位的起始位置是原先在文档流的位置（以浅色框框的左上角，相对进行了一定的偏移）

偏移量通过top，right，bottom 和 left设定

定义图 特点

脱离文档流的位置，遗留下来的空间由后面的元素填充

定位的起始位置为最近的父元素且postion不为static；否则为Body文档本身，然后通过通过top，right，bottom 和 left设定偏移位置，不设置起始位置走正常文档流

总结：父相子绝

定义图 fixed表示，相对于视口（浏览器窗口）进行偏移

特点

position属性sticky

CSS的 position 属性用于指定一个元素在文档中的定位方式。一般要搭配top，right，bottom 和 left，z-index属性使用，才能决定了该元素的最终位置，如下段代码所示：

其中relative，absolute，fixed属性值都是相对某个基点的定位

在有一些情况下 光靠float和position是无法实现的，比如：在父内容里面垂直居中一个块内容等等

这个时候就可以引入flex布局，如下图所示，container是flex父盒子，items是flex布局里面的子盒子

左边两列（紫色背景）为父元素属性，右边一列（橙色背景）为子元素属性

设置主轴的方向

默认的，flex的盒子都会想要排在一行上，可以通过这个属性来修改

就是上面两个属性的集合，比如：

这个属性决定了main axis主轴上如果有剩余的空间，该如何分配

这个属性定义了子盒子在cross axis交叉轴（垂直于主轴的方向）上如何对齐

和之前justify-content的属性相对应，这个属性决定了cross axis交叉轴（垂直于主轴的方向）上如果有剩余的空间，该如何分配，

但是只在有多根轴线的时候才起作用

This property only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse

注意：这个属性是控制盒子flex items之间的距离，而不是和外部的距离（从第二个gap：30px就可以看出来）

默认情况下盒子会按照顺序排列，但是也可以通过order来改变排列顺序

flexgrow定义items的放大比例，默认为0，即如果存在剩余空间，也不放大

flexgrow定义items的缩小比例，默认为1

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小

子容器在不伸缩情况下的原始尺寸，主轴为横向时，代表宽度，主轴为纵向时，代表高度。

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后面两个属性可选

允许items中的单个item有与其他item不一样的对齐方式，可覆盖align-items属性

是一个用于 web 的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版

（由于自己还没有用到过，所以贴个别人的帖子）grid布局

双飞翼布局以及圣杯布局

参考文章：

Flex 布局教程：语法篇

A Complete Guide to Flexbox

字节前端初阶训练营|理解CSS