浮动的问题 – 高度塌陷
由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度。父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题。解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）。清浮动的目的是让父元素计算总高度的时候，把浮动子元素的高度算进去。如何清除浮动呢? 使用clear属性。
CSS属性 - clear
clear属性是做什么的呢?clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。
clear的常用取值：
- left：要求元素的顶部低于之前生成的所有左浮动元素的底部
- right：要求元素的顶部低于之前生成的所有右浮动元素的底部
- both：要求元素的顶部低于之前生成的所有浮动元素的底部
- none：默认值，无特殊要求
那么我们可以利用这个特性来清除浮动。
清除浮动的方法
事实上我们有很多方法可以清除浮动。
- 方法一: 给父元素设置固定高度：扩展性不好（不推荐）
- 方法二: 在父元素最后增加一个空的块级子元素，并且让它设置clear: both。会增加很多无意义的空标签，维护麻烦。违反了结构与样式分离的原则（不推荐）
- 方法三: 给父元素添加一个伪元素（推荐）。编写好后可以轻松实现清除浮动。
给父元素增加::after伪元素。纯CSS样式解决，结构与样式分离（推荐）。
布局方案总结
| 定位方案 | 应用场景 |
|---|---|
| normal flow（标准流） | 垂直布局 |
| absolute positioning（绝对定位） | 层叠布局 |
| float（浮动） | 水平布局 |
