浮动引起的问题：
1.父元素高度坍塌。
2.后面非浮动元素跟随其后。破坏了页面布局。
html:
<div class="test">前面的元素</div><div class="parent"> ???<div class="child1">左浮动</div> ???<div class="child2">左浮动</div></div><div class="test">后面的元素</div>
因此我们需要清除浮动，清除浮动的方式有以下几种：
1.给父级后面的元素添加css属性clear:both;这样可以解决问题2，但是父级元素是仍旧没有高度的。而以下几个方法都可以解决这个问题。
2.在父级元素里的末尾添加一个空的div，设置clear:both;
优点：简单。
缺陷：页面浮动布局多，就要增加很多空div。
3.设置父级伪类:after和zoom;（推荐方法）
IE8以上和非IE浏览器才支持:after，原理和方法2类似，zoom(IE专有属性)可解决ie6,ie7浮动问题。
.parent{ ???border: 1px solid red;}.child1, .child2{ ???float: left; ???border: 1px solid blue;}.test{ ???background: pink;}/* 清除浮动 */.parent:after{ ???content: ‘ ‘; ???display: block; ???height: 0; ???clear: both; ???visibility: hidden;}.parent{ ???zoom: 1; }4.设置父级元素高度。只建议高度固定的布局时使用。如下设置了高度30px;
5.设置父级元素overflow:hidden或auto。
.parent{ ???border: 1px solid red; ???/* 清除浮动 */ ???overflow: hidden; ???/* zoom: 1; */ ???width: 100%;}注意：1.必须定义width或zoom:1，同时不能定义height，使用overflow:hidden或auto时，浏览器会自动检查浮动区域的高度。
2.不能和position配合使用，因为超出的会被隐藏。如下：
.parent{ ???border: 1px solid red; ???overflow: hidden; ???zoom: 1; ???/* 使用position */ ???position: relative;}.child1, .child2{ ???float: left; ???border: 1px solid blue; ???/* 使用position */ ???position: absolute; ???????????}子元素就被隐藏了：
6.父元素也设置浮动，其后元素设置clear:both;
.parent{ ???border: 1px solid red; ???float: left;}.child1, .child2{ ???float: left; ???border: 1px solid blue;}.test{ ???background: pink; ???clear: both;}7.将父级元素设置为表格。
.parent{ ???border: 1px solid red; ???display: table; ???width: 100%;}8.在结尾处加<br/>标签。
<div class="parent"> ???<div class="child1">左浮动</div> ???<div class="child2">左浮动</div> ???<br class="clearFloat"></div>
.parent{ ???border: 1px solid red; ???zoom: 1;}.clearFloat{ ???clear: both;}CSS清除浮动八种方法
原文地址：https://www.cnblogs.com/PeriHe/p/8538315.html