一、清除浮动。
（1）verflow:hidden;这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很 了解。一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。
verflow:hidden清除浮动，例如如下：（样式box div是样式content div的父元素）
.box{
background:#000;
width:300px;
overflow:hidden;
}
.content {
float:left;
width:200px;
height:200px;
background:red;
}
（效果图） box设置overflow:hidden，清除content的浮动，所以box的高度随content的高度变化而变化。如果box没有设置overflow:hidden，那么content的高将影响不了box的高。
（2）clear:both;该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。
样式 <style>
.p1{
float:left;
width:200px;
background: darkgoldenrod;
}
.p2{
float:left;
width:400px;
background: darkmagenta;
}
.p3{
clear: both;
}
</style>
HTML中的代码
<p class="p1">这个是第1列，</p>
<p class="p2">这个是第2列，</p>
<p class="p3">这个是第3列。</p>
如果不给第三列clear:both，那么第三列就会在第二列的后面，加了之后，在第二列的下面。