简谈“clear：both”的作用

在用H5进行布局的时候发生了灵异事件，明明布局正确，但是布局乱起来，查找了一段时间，还是不能将排版改正过来。我也只知道是浮动那边出的问题。要解决情况，就需要使用clear:both了。

CSS手册指示：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。

程序代码:

第1列，

第2列，

第3列。

预想正常情况下，第一列跟第二列在一起，第三列在下边。可是事实情况很糟，文字“第3列”出现的位置竟然出现在文字“第1列第2列”的右上方。于是给css设置属性body{margin：0px；padding：0px}，去除了页面原有的边距，发现文字排在一行。

于是尝试在第3个这列加一个清除浮动

第3列。

结果如愿得到预料的效果，有点小得意吧，呵呵。顺便查了查关于clear的其他用处，才发现，之前的做法有点小草率了。

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

程序代码

第一段内容 第一段内容 第一段内容article>

第二段内容 第二段内容 第二段内容section>

第三段内容

该页面测试在IE下效果正合所要：蓝色块内部有红色和黄色两个色块内容，同时在蓝色块以下是第三段文本。
可在FF测试下，效果可不是这样的。我们不能单单想在下一层清除就能完成我们的工作，我们必须在浮动元素所在标签闭合之前及时进行“清除”。

程序代码

　　

第一段内容 第一段内容 第一段内容article>
　　

第二段内容 第二段内容 第二段内容section>
　　

第三段内容

对于因多加的

标签会引起IE和FF高度变化，通过如下方法解决：

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

 

转载于:https://www.cnblogs.com/szwblog/p/4366400.html