清除浮动的原因就是让两个及两个以上的元素显示在同一排；
<style>
*{
margin:0;
padding:0;
}
.outBox{
border:2px solid pink;
font-size:20px;
color:#fff;
font-weight: bold;
}
.left{
width:200px;
height: 200px;
background:skyblue;
text-align: center;
line-height:200px;
}
.right{
width: 100px;
height: 100px;
background:slateblue;
text-align: center;
line-height:100px;
}
</style>
<div class="outBox">
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="other"></div>
未设置浮动的样式如下（未给父元素设置高度，父元素的高度是由子元素的高度撑开的）：
给left盒子设置了左浮动后显示效果如下图（设置的浮动元素即脱离了文档流，父元素的高度现在由right盒子决定，犹豫left盒子脱离了文档流所以right盒子就跑到了最左边被left盒子盖住了）：
为了方便观察，现在将right盒子的宽高各修改为300px，如下图：
给left,right均添加左浮动后的效果图（父元素的高度没了，只剩下了最初设置了boder）：
正式步入正轨Duang Duang Duang…
清除浮动的方法如下：
1.给父元素添加overflow:hidden;
此种方法只适用于内容元素的高度不会超过父元素的高度(即内容高度固定的)
<style>
.outBox{
border:2px solid pink;
font-size:20px;
color:#fff;
font-weight: bold;
overflow: hidden;
}
</style>
效果图如下：
缺点：给父元素设置了overflow:hidden后，当元素的内容超过父元素的高度的时候，元素就会被截掉（效果图如下）
2.给父元素添加高度
由于父元素的高度是由内容盒子撑开的高度，设置的父元素最小高度是300px,父元素的最小高度必须>=300px，如不大于就会产生入下效果图
父元素的最小高度必须>=300px，如大于或等于会产生入下效果图（正常效果图）
缺点：此种方法的必须知道内容元素的高度，不灵活，一般元素高度都不会写死
3.给添加浮动元素的div，在其最后添加兄弟元素，并给新增加的兄弟元素添加类名clear,给该类名添加样式 .clear{ clear:both; }
结构如下：
<div class="outBox">
<div class="left">左</div>
<div class="right"> 右</div>
<div class="clear"></div>
</div>
缺点：此种方法虽然简单，但是添加了无意义的标签，不过比前面两种方法好太多；
4.给父元素添加类名clearfix,并给其类名添加伪类::after;
优点：浏览器支持好、不容易导致布局出现异常问题，写法固定；（推荐使用此种方法，简单便捷，只需添加一个class即可解决问题）缺点：css代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
<style>
.clearfix::after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
zoom:1; //兼容ie浏览器低版本清除浮动不生效
}
</style>
<div class="outBox clearfix">
<div class="left">左</div>
<div class="right"> 右</div>
</div>