CSS中布局方式有三种，分别是常规流、float以及position.常规流常用地有BFC（Block Formatting Context），Flex和Grid，floate包含left和right，position可设置fixed和absolute来给元素布局。
常规流
BFC
BFC（区块格式化上下文）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。BFC的常用场景有消除元素浮动的影响和阻止margin合并
消除元素浮动：当元素浮动后，父元素的可能宽高无法被撑起，有可能为零。
如图，float盒子都设置为浮动，父元素只有后一个创建BFC，可以看到没有创建BFC的那个盒子已经塌陷了。
创建BFC的方式：
- display: flow-root
- overflow不为visiable
- 绝对定位
- flex子项
- grid子项
BFC还有一个效果是防止上下margin合并。
如图，蓝色和绿色各设置了10px的margin, 可以看到重叠的margin已经合并了，不是我们所期待的20px。再后一个盒子设置BFC之后，两个盒子的margin没有合并，为20px。
Flex布局
元素内的display属性设置为flex, 其所有子项都将被视为flex-item。justify-content（X轴）有start, end, center等值，控制主轴；align-items（Y轴）控制交叉轴，有start, end, center等值。可flex可以轻易地实现元素居中：
flex的属性很丰富，具体可参考MDN。
Grid布局
grid布局将一个盒子视为一个n m的网格，想占用多大的空间设置相对应的坐标即可。通过设置display为grid来指定grid布局，通过grid-template-columns和grid-template-rows这两个属性指定列数和函数。有grid-column, grid-row和grid-arem占据网格位置，若网格发生相互重叠，则会覆盖该位置。
float布局
早期没有flex布局和grid布局的时候，想调整复杂的布局只有通过float, float相对复杂。现在有了flex和grid布局能够简单快速的达到我们想要的布局效果, 所以float一般就不怎么用于布局，一般用来设置文字环绕图片的功能。
position布局
absolute
position设置为absolute的时候，表示该元素为绝对定位，该元素往祖先元素寻找第一个position不为static的元素作为它的定位，调整其top, left, right, button属性设置位置。
fixed
设置该元素相对于window的位置展示，把一个盒子固定在某一个位置，不随鼠标滚动的而改变。
