做前端开发我们都不得不使用float浮动属性，但是如果使用了浮动，难免会遇到父级元素不能自适应高度。

假设了有三个盒子对象，一个父级里包含了两个子级，父级元素没有设置固定高度，子级一个使用了float:left（左浮动）属性，另外一个子级使用float:right（右浮动）属性，这种情况的话父级元素的高度就必定不能被子内容而撑开。

如图：

（三个盒子对象）

（设置了浮动之后，父级元素不能被撑开）

（我们所希望的效果）

这种情况在我们的工作中特别常见，我们可以通过四种方法清除浮动，

方法一：使用一个空标签

看看css属性

方法二：给父元素设置display:inline-block属性

方法三：给父元素设置overflow:auto或hidden属性

方法四：利用css伪类（比较常用，例如bootstrap框架使用的就是这种方法）

将.clearfix这个类加入到需要清除浮动的父级元素

例如<div class="cont clearfix"></div>

转自：http://www.lxyweb.com/article.php?tid=1&id=36