清除浮动与浮动闭合

时间：2014-06-02 18:14:58 阅读：272 评论：0 收藏：0 [点我收藏+]

浮动(float)在网页布局中随处可见，通过浮动，我们能很方便地布局，但浮动之后遗留下来太多的问题需要解决，特别是IE6-7

浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？下面将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。

一、清除浮动还是闭合浮动（Enclosing float or Clearing float）？

很多人都已经习惯称之为清除浮动，我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。

1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；

2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。

.main：很抱歉，现代浏览器中我没能把warp撑高(float:left)

.side：我也浮动了(float:left)

.main：warp自己闭合浮动了，所以footer不用再清除浮动了(float:left)

.side：我也浮动了(float:left)

<div class="warp">
<div class="main left">.main：很抱歉，现代浏览器中我没能把warp撑高(float:left)</div>
<div class="side left">.side：我也浮动了(float:left)</div>
</div>

}

}

.main{float:left;}

.side{float:right;}

.main{float:left;}

.side{float:right;}

.main{float:left;}

.side{float:right;}

原文地址：http://www.cnblogs.com/hansu/p/3720954.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行