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>