控制页面布局的工具有浮动、Flexbox 和定位等，这些工具本身没有优劣支付，只不过实现布局的方式略有不同。
1 浮动
浮动元素会脱离正常的文档流，并向左或向右移动，直到它的边缘碰到包含框或另一个浮动元素的边框为止。 文本和内联元素会环绕在浮动元素的周围。
1.1 清除浮动
图 浮动元素不会增加容器高度
clear 清除浮动。
clear: both; 移动到前面浮动元素的下面，而不是侧面。
clear: left; 移动到前面左边浮动元素（向左浮动的元素）的下面。
clear: right; 移动到前面右边浮动元素（向右浮动的元素）的下面。
图 clear 属性示意图
1.2 浮动陷阱
图 浮动陷阱
浏览器会将浮动元素尽可能地放在靠上的位置。因此第3个方块不是排列在右边，而是放在了第2方块的下面。
解决方案：让第3个方块清除浮动。
图 浮动陷阱解决方案
1.3 BFC
图 浮动的设计初衷
最初创造浮动并不是用于页面布局，而多用于报纸和杂志的布局。将一个元素（通常是一张图片）拉到其容器的一侧，这样文档流能够包围它。如上图的左边的布局。
但是，如果我们想实现上图的右边的布局，通常需要为正文建立一个块级格式化上下文。
块级格式化上下文（block formatting context），它将内部的内容与外部的上下文隔开，具有以下作用：
- 包含了内部所有元素的上下外边距，不会跟BFC外面的元素产生外边距折叠。
- 包含了内部所有的浮动元素。
- 不会跟BFC外面的浮动元素重叠。
1.3.1 BFC 创建方式
给元素添加以下的任何属性值：
- float: 不为none;
- overflow: 不为visiable;
- display: inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid。（块级容器）
- position: absolute 或 fixed。
1.4 网格系统
网格系统提高代码的可复用性，通过提供一系列的类名，将网页的一部分构造成行和列。它只给容器设置宽度、定位与间隔，不给网页提供视觉样式，比如颜色和边框。
设计思路是：在一个行容器里放置一个或多个列容器，列容器的类决定每列的宽度。
列的个数一般是12个，因为12能被2，3，4，6整除，组合起来足够灵活。
