如果一个父元素的所有子元素都设置了float效果，则该父元素的高度不会被撑开且颜色也不会显示。这是因为子元素设置float效果后脱离了标准的文档流，
不占据文档空间所以不能把父元素撑开。有时为了解决这个问题可以使用下面几种方法来清除浮动效果。
方法一：使用空标签
该方法就是在子元素后再添加一个空标签，空标签可以是<div>也可以是<p>等，但是要设置样式clear : both ;这样就可以达到清除浮动的效果。
方法二：给父元素设置overflow: auto;
该方法是给父元素设置样式 overflow: auto; 也可以设置为 overflow: hidden，但 overflow: visible不可以。
方法三：使用:after伪元素
该方法是利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于第一种方法，区别在于前者是在html插入了一
个空的div.clear标签，而该方法是利用其伪元素:after在元素内部增加一个类似于空div的效果。下面来看看其具体的使用方法：
.outer :after {clear:both;content:‘.‘;display:block;width: 0;height: 0;visibility:hidden;}
原文：http://www.cnblogs.com/csulym/p/5543796.html