清除浮动
在了解清楚浮动之前,我们要先了解什么是浮动. 浮动最初做图文混排效果，用来呈现图文环绕的效果,现在主要用来做网页布局的。
我们为啥需要浮动？
我们想把多个块级元素放到同一行上。 打破标准流的限制。
浮动语法
只有左浮动和右浮动。
float: left;
float: right;
浮动特点
1.浮动元素会脱标，在标准流中不占位置
2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素会受到上面元素边界的影响
5.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高
清除浮动的原因
浮动元素的父级没有高（没有高度的原因可能是因为不方便给高度，也可能是因为你忘记给高度啦！！！）。
父级没有高度，则会影响下面的标准流盒子，下面的盒子会升上来，从来影响页面布局。
清除浮动目的： 让父亲自动检测浮动子元素的设置高度。 父亲有高度了，就不会影响页面布局了。
解决方案
- 给父级一个高度。
- 额外标签法。 额外新增一个标签，页面的标签会越来越多，不好~~~
- 伪元素方法（单、双伪元素）。 算是额外标签法的一个升级版本，因为不需要增加额外的标签。 好处就是省标签。
/* 双伪元素清除浮动 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
注意： 清除浮动的位置，是找到浮动元素的最近父级就可以了，调用 clearfix 类
<ul class="xtx clearfix">
<li></li>
<li></li>
</ul>
