简谈“clear：both”的作用

在用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的其他用处，才发现，之前的做法有点小草率了。

在网页设计时还有一种很普遍的情况：

程序代码
<style type="text/css">
#main {width: 600px;padding: 20px;}
article {float: left;width: 130px;}
section {float: right;width: 420px;}
</style>
<div id="main">
<article>第一段内容 第一段内容 第一段内容</article>
<section>第二段内容 第二段内容 第二段内容</section>
</div>
<p style="clear:both;">第三段内容</p>
该页面测试在IE下效果正合所要：蓝色块内部有红色和黄色两个色块内容，同时在蓝色块以下是第三段文本。
可在FF测试下，效果可不是这样的。我们不能单单想在下一层清除就能完成我们的工作，我们必须在浮动元素所在标签闭合之前及时进行“清除”。

程序代码
<style type="text/css">
　　#main {width: 600px;padding: 20px;}
　　article {float: left;width: 130px;}
　　section {float: right;width: 420px;}
　　.clear {clear: both;}
</style>
<div id="main">
　　<article>第一段内容 第一段内容 第一段内容</article>
　　<section>第二段内容 第二段内容 第二段内容</section>
　　<div class="clear"></div>
</div>
<p>第三段内容</p>

对于因多加的<div class="clear"></div>标签会引起IE和FF高度变化，通过如下方法解决：

程序代码
.clear {
     clear: both;height:1px;margin-top:-1px;overflow:hidden;
}