前言
在没有出现flex布局之前，几乎所有的左右布局都是使用float进行浮动的。flex布局兼容性不太好，一些老的浏览器没有使用这个css3的新特性，所以如果考虑到兼容问题，就可以考虑使用float进行布局了。但是使用了float属性的元素会脱离标准的文档流，顾名思义，float（浮动）就说明了它的用意，即浮动在其他元素上。所以对于父元素来说，加了float的子元素是漂浮在上面的，而下层的元素则会挤上来，这样非常不符合视觉要求。
浮动的盒子
图中红色边框的元素是加了边框的元素，而我是其他的内容的元素则是和浮动元素父元素的同级别的元素，可以看到，这样是很不美观的，按照道理，我是其他的内容的元素应该显示在边框元素的下方。所以清除浮动就显得很有必要了
解决
方法一：给父元素添加合适的高度
css
.des_wrap {
background-color: orange;
}
.container {
height: 120px;
}
.box {
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
}
html
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="des_wrap">
<h3>清除浮动 - 给父元素设置高度</h3>
<p>给父元素设置指定的高度</p>
</div>
说明：container是浮动元素的父元素，给父元素添加了120px的高度。效果如下：
方法二：隔墙法
给最后一个浮动盒子处添加一个元素，加上clear:both;属性
css
.des_wrap {
background-color: orange;
}
.container {
height: 120px;
}
.box {
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
}
.clear {
clear: both;
}
html
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>
</div>
<div class="des_wrap">
<h3>清除浮动 - 隔墙法</h3>
<p>给最后一个浮动盒子处添加一个元素，加上clear：both；属性</p>
</div>
效果
方法三：给父元素添加overflow
给浮动元素的父元素的样式overflow除了visible值以外的值
css
.des_wrap {
background-color: orange;
}
.container {
overflow: hidden;
/* overflow: visible; */
}
.box {
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
}
html
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="des_wrap">
<h3>清除浮动 - overflow</h3>
<p>给浮动元素的父元素的样式overflow除了visible值以外的值</p>
</div>
效果
方法四：利用父元素的伪元素
给浮动元素的父元素的伪元素添加clear:both;属性
css
.des_wrap {
background-color: orange;
}
.container {
}
.box {
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
}
.clearfix::after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
html
<div class="container clearfix">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="des_wrap">
<h3>清除浮动 - 伪元素</h3>
<p>给浮动元素的父元素的伪元素添加clear:both;属性</p>
</div>
效果图
方法五：双伪元素
css
.des_wrap {
background-color: orange;
}
.container {
}
.box {
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
html
<div class="container clearfix">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="des_wrap">
<h3>清除浮动 - 双伪元素</h3>
<p>给浮动元素的父元素的伪元素添加clear:both;属性</p>
</div>
总结
日常生活中，使用比较频繁的是方法三和方法四
