为什么要清除浮动？怎么清除浮动？
清除浮动的原因（布局）：
- 块级元素认为浮动元素不存在；行内元素认为浮动元素存在并且围绕浮动元素摆放，影响布局
- 补充：浮动元素遵从尽可能靠左、靠上，尽可能一个挨着一个、不超过父级、不超过所在行最高点、不超过前一个浮动元素最高点这些原则摆放
经常出现的问题：高度塌陷
浮动元素不能撑开父级元素。子盒子浮动，导致的父盒子内高度为 0 ，父级盒子不能被撑开，发生 高度塌陷 的情况。具象化：父级盒子背景不能显示；『边框不能撑开；margin和padding不能正确显示』
清除浮动的方法：
前两种分别是给父盒子添加高度/触发BFC重新排列，后两种都是在父级的末尾添加一个去除浮动的元素
-
给 父盒子 设置合适的高度、border、padding；
-
【推荐BFC】：给父盒子添加样式
overflow:hidden;（不为visible即可） -
在父盒子里面最后的子盒子后面 再添加一个子盒子
.clear {clear: both;} /* 位于所有的浮动元素之后，撑开了父级的高 */ -
采用伪元素，给父元素追加
::after
本质：和第三种一样，伪元素在也是在父盒子里面的末尾建立了一个可以撑开父级的伪元素
/* 最简写法 */
.father::after {
content:"";
display: inline-block; /* 『拥有独立的盒模型 - 块元素单独一行，可能 clear:both 失效』 */
clear:both; /* 表示块级元素的左右两边都不能有浮动元素 */
}