浮动与网格系统

控制页面布局的工具有浮动、Flexbox 和定位等，这些工具本身没有优劣支付，只不过实现布局的方式略有不同。

1 浮动

浮动元素会脱离正常的文档流，并向左或向右移动，直到它的边缘碰到包含框或另一个浮动元素的边框为止。 文本和内联元素会环绕在浮动元素的周围。

1.1 清除浮动

图 浮动元素不会增加容器高度

clear 清除浮动。

clear: both; 移动到前面浮动元素的下面，而不是侧面。

clear: left; 移动到前面左边浮动元素（向左浮动的元素）的下面。

clear: right; 移动到前面右边浮动元素（向右浮动的元素）的下面。

图 clear 属性示意图

1.2 浮动陷阱

图 浮动陷阱

浏览器会将浮动元素尽可能地放在靠上的位置。因此第3个方块不是排列在右边，而是放在了第2方块的下面。

解决方案：让第3个方块清除浮动。

图 浮动陷阱解决方案

1.3 BFC

图 浮动的设计初衷

最初创造浮动并不是用于页面布局，而多用于报纸和杂志的布局。将一个元素（通常是一张图片）拉到其容器的一侧，这样文档流能够包围它。如上图的左边的布局。

但是，如果我们想实现上图的右边的布局，通常需要为正文建立一个块级格式化上下文。

块级格式化上下文（block formatting context），它将内部的内容与外部的上下文隔开，具有以下作用：

1. 包含了内部所有元素的上下外边距，不会跟BFC外面的元素产生外边距折叠。
2. 包含了内部所有的浮动元素。
3. 不会跟BFC外面的浮动元素重叠。

1.3.1 BFC 创建方式

给元素添加以下的任何属性值：

1. float: 不为none;
2. overflow: 不为visiable;
3. display: inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid。（块级容器）
4. position: absolute 或 fixed。

1.4 网格系统

网格系统提高代码的可复用性，通过提供一系列的类名，将网页的一部分构造成行和列。它只给容器设置宽度、定位与间隔，不给网页提供视觉样式，比如颜色和边框。

设计思路是：在一个行容器里放置一个或多个列容器，列容器的类决定每列的宽度。

列的个数一般是12个，因为12能被2，3，4，6整除，组合起来足够灵活。