在用H5进行布局的时候发生了灵异事件，明明布局正确，但是布局乱起来，查找了一段时间，还是不能将排版改正过来。我也只知道是浮动那边出的问题。要解决情况，就需要使用clear:both了。
CSS手册指示：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。
程序代码:
<p style="float:left;width:200px;">第1列，</p>
<p style="float:left;width:400px;">第2列，</p>
<p >第3列。</p>
预想正常情况下，第一列跟第二列在一起，第三列在下边。可是事实情况很糟，文字“第3列”出现的位置竟然出现在文字“第1列第2列”的右上方。于是给css设置属性body{margin：0px；padding：0px}，去除了页面原有的边距，发现文字排在一行。
于是尝试在第3个这列加一个清除浮动<p style=" clear:both;">第3列。</p>
结果如愿得到预料的效果，有点小得意吧，呵呵。顺便查了查关于clear的其他用处，才发现，之前的做法有点小草率了。
原文：http://www.cnblogs.com/szwblog/p/4366400.html