1 浮动
1.1 浮动简介
最初用于实现文字环绕图片或其他元素，后来成为主流的页面布局方式。
1.2 浮动元素的特点
行内元素、行内块元素、块级元素均可设置浮动属性 float，值为：none(默认) / left / right，设置值为 left 或 right 后，可实现元素向左浮动或向右浮动，浮动后的元素不同于原来的三种显示模式，具有自己的特点：
1、浮动的元素会脱离文档流，多个浮动的兄弟元素会水平排列、自动换行。
2、浮动的元素可以设置宽高，但默认宽高被其内容撑开。
3、浮动的元素可以完美地设置4个方向的内外边距，且不存在 margin 塌陷 和 margin合并 的问题。
1.3 浮动元素产生的影响
① 元素浮动之后产生的影响
- 浮动元素对兄弟元素的影响
1、浮动元素对前面的兄弟元素没有影响；
2、浮动元素对后面的兄弟元素有影响：后面的元素会占据浮动元素原来的位置，显示在浮动元素的下面，但文字会被挤出来。故实际布局中，兄弟元素通常一起浮动。
- 浮动元素对父元素的影响
浮动元素无法撑起父元素的高度，这种现象也称为父元素高度塌陷。
② 解决浮动的影响（清除浮动）
- 解决浮动元素对后面兄弟元素的影响：
给第一个受浮动元素影响的元素设置 CSS 属性：clear: both;
- 解决浮动元素对父元素的影响：
方案一：给父元素也设置浮动。缺点：会引起新的问题。
方案二：给父元素设置固定高度。缺点：高度需自己计算。
方案三：给父元素设置 CSS 属性：overflow: hidden/auto/scroll (除visible之外的都可以)。
方案四：给父元素添加最后一个子元素（要求：高度为 0 的块级元素），给该子元素设置 clear: both; 。
方案五：给父元素设置 after 伪元素，给伪元素设置 clear: both; ,原理同方案四，动态地在最后面添加一个子元素，推荐使用。设置方法如下：
.类名::after {
/* content 设置伪元素中的文本内容，为必须设置的样式，只有设置该属性伪元素才生效 */
content: "";
/* 设置为块级元素，伪元素默认是行内元素*/
display: block;
/* 清除浮动 */
clear: both;
}
1.4 浮动相关的 CSS 属性
| CSS 属性 | 功能 | 属性值 |
|---|---|---|
| float | 设置元素浮动 |
none：不浮动，默认值 left：靠左浮动 right：靠右浮动 |
| clear | 清除前面浮动元素的影响 |
left：清除左浮动影响 right：清楚右浮动影响 both：清楚左右浮动的影响 |
2 行内、行内块元素在布局中的特点
2.1 文本属性作用于行内元素和行内块元素（行内、行内块可被其父元素当作文本处理）
① 让行内元素、行内块元素在其父元素中水平居中
给行内元素、行内块元素的父元素设置 text-align: center;
② 让行内元素、行内块元素在其父元素中垂直居中
给行内元素、行内块元素的父元素设置行高 line-height: 父元素高度;
如果行内元素、行内块元素中还有文字内容，还要给它们设置vertical-align: center;，因为默认行内、行内块元素是像文本一样，以基线为准居中于父元素中。
2.2 行内元素、行内块元素之间的空白
① 元素之间的空白（左右）
产生原因：书写代码的时候，每一行代码后面有换行符，换行符被浏览器解析为空白
解决方案：
- 方案一：每行代码后面不再写换行（实际中不可行）。
- 方案二：给父元素设置字体大小为0，再给行内元素、行内块元素单独设置字体大小。
② 元素底部的空白（如：图片的幽灵空白）
产生原因：行内块元素默认沿着文字基线对齐，幽灵空白其实是基线与底线的距离
解决方案：
- 方案一：设置父元素字体大小为0，即基线与底线距离为0。
- 方案二：设置行内元素、行内块元素不沿基线对齐，即
vertical-align: top / middle / bottom（值不为baseline即可）。 - 方案三：设置行内元素、行内块元素为块级元素，适合于只有一个行内或行内块元素的情况，如：图片的幽灵空白。
