常规流
默认情况下的布局
display: block / inline / inline-block
浮动
float 属性：指定一个元素沿其容器的左侧或右侧放置，允许文本和内联元素环绕它
浮动元素会脱离正常的文档布局流，并吸附到其父容器的左边或右边，在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其剩余的空间
清除浮动
最初引入浮动功能是为了实现文字环绕图片的布局，后来作为一种通用布局让元素向左右移动，但是浮动元素脱离了标准流，导致父元素计算总高度时，就不会计算浮动子元素的高度，造成了高度坍塌的问题，所以需要清除浮动
清除浮动方法：
1. 父元素添加伪元素（clearfix）：
.wrapper::after {
content: "";
clear: both;
display: block;
}缺点是增加了无意义的 html 内容
2. overflow：
父元素添加 overflow: auto，利用了 BFC，缺点是可能出现滚动条
3. display: flow-root
现代解决方案：父元素添加 display: flow-root，创建一个新的 BFC，而不会产生任何其他潜在的问题副作用
浮动 - 学习 Web 开发 | MDN (mozilla.org)
CSS-浮动详解 - 掘金 (juejin.cn)
定位
使用 position 属性：
static：静态定位。默认值，只意味着将元素放入它在文档布局流中的正常位置relative：相对定位。占据在正常文档流中，但是可以通过top、bottom、left、right修改元素相对于默认位置（static 时的位置）进行偏移absolute：绝对定位。已经脱离正常文档流，不占用原有空间，可以通过top、bottom、left、right修改元素相对于已定位的元素（不能是 static）或者<html>的位置进行偏移fixed：固定定位。可以通过top、bottom、left、right修改元素相对于浏览器视口本身进行定位sticky：粘性定位。基本上是 relative 和 fixed 的结合，初始表现为 relative，当滚动到满足top、bottom、left、right的条件时表现为 fixed
z-index
定位可能导致元素堆叠，默认情况下，后定位的元素会覆盖先定位的元素。但是可以通过 z-index 属性改变
Tip
margin 仍会影响定位的元素
弹性盒子
display: flex：用于按行或按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间
解决了上面布局方式的一些痛点：
- 在父内容里垂直居中一个块内容
- 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用
- 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同
弹性盒子 - 学习 Web 开发 | MDN (mozilla.org)
flex 布局的基本概念 - CSS：层叠样式表 | MDN (mozilla.org)
Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
flex « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
网格
display: grid：二维布局系统
网格 - 学习 Web 开发 | MDN (mozilla.org)
网格布局的基本概念 - CSS：层叠样式表 | MDN (mozilla.org)
CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)
写给自己看的display: grid布局教程 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
多列
通过 2 个属性开启多列布局：column-count 或 column-width
/* 分为3列，浏览器自动计算每列宽度 */
.container {
column-count: 3;
}
/* 每列宽度200px */
.container {
column-width: 200px;
}