清除浮动的原因和方法

1. 清除浮动的原因

       浮动元素的父级没有高（没有高度的原因可能是因为不方便给高度，也可能是因为你忘记给高度啦！！！）。

       父级没有高度，则会影响下面的标准流盒子，下面的盒子会升上来，从而影响页面布局。

       清除浮动目的： 让父亲自动检测浮动子元素的设置高度。 父亲有高度了，就不会影响页面布局了。

2. 解决方案

     (1) 给父级一个高度。

     (2) 额外标签法。 额外新增一个标签，页面的标签会越来越多，不好~~~

     (3) 伪元素方法（单、双伪元素）。 算是额外标签法的一个升级版本，因为不需要增加额外的标签。 好处就是省标签。

/* 双伪元素清除浮动 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

注意： 清除浮动的位置，是找到浮动元素的最近父级就可以了，调用 clearfix 类

<ul class="xtx clearfix">
    <li></li>
    <li></li>
</ul>