本文全程参考： CSS清除浮动_清除float浮动http://www.divcss5.com/jiqiao/j406.shtml
刚开始接触的时候，很容易产生疑问。为什么要清除浮动？每当看到clear:both的时候就很困惑。其实，我们应该首先理解，不清除浮动产生怎样的后果。
打开浏览器调试，发现元素的高度变成0了，所谓的“高度塌陷”。这种怪异情况大多是由子元素的浮动造成的。要避免这种情况，就得清除浮动。否则的话，父元素上添加的样式就没法用了。参考博客详细的划分了三种情况。
至于怎么清除浮动，参考博客也讲的很清楚了。