浮动布局，float:left;会使当前元素脱离文档流，从而失去对父级元素的支撑，如果此时父级元素没有设置高度，下面的元素就会挤上去，因此需要清除浮动
清除浮动的三个常用方法： 给浮动元素的父级元素设置overflow:hidden;在浮动元素的同级下添加一个空标签，并且设置clear:both;浮动元素的父级元素使用::after{clear:both;content:'';display:block;}代码演示： <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>浮动以及清除浮动</title></head><style>*{list-style: none;padding:0;margin: 0;}.wrap{background-color: red;margin-bottom: 2em;/*方法一：给父元素设置overflow:hidden;*/overflow: hidden;}.FirstUl li{float: left;}.Second{background-color: red;margin-bottom: 2em;}.SecondUl li{float:left;}.test{/*方法二：在浮动元素的同级添加一个空标签，设置为clear:both;*/clear: both;}.Third{background-color: red;}.ThirdUl li{float: left;}/*方法三：给浮动元素的父元素使用::after{};*/.ThirdUl::after{content: '';display: block;clear: both;}</style><body><div class="wrap"><ul class="FirstUl"><li>测试</li><li>测试</li><li>测试</li></ul></div><div class="Second"><ul class="SecondUl"><li>测试</li><li>测试</li><li>测试</li><div class="test"></div></ul></div><div class="Third"><ul class="ThirdUl"><li>测试</li><li>测试</li><li>测试</li></ul></div></body></html>效果：
说明：
其实，方法2、3的思路使一样的，都是在浮动元素的同级新添加一个空标签，然后设置clear:both;我们知道，::after是伪元素选择器，即在被选中的元素后面创建一个伪元素，跟手动添加的标签能达到一样的效果。
另，方法二在新添加标签时，不能使用与浮动元素相同的标签，比如这里的li是浮动的，手动新添加的标签就不能是li，否则会出错。