对于float与流体布局的一点认识

在学完css中浮动的效果后还是有一点蒙，为了更好的认识及使用浮动，现在整理一下思路。

浮动，最初是用来实现文字环绕图片的效果，所以如果将某一个元素打上浮动标签，其后面紧跟的一个元素就会紧跟浮动形成环绕效果。为了实现这种效果，就使得浮动具有两个特性：包裹与破坏。包裹是指不论元素以前具有什么属性，在float化之后，元素会具有block属性，即其具有了块状元素的特点，可以不受外部元素的影响，并自成一行。但又因为其具有破坏性，使得父元素高度塌陷，随之而来的就是后一个标签不论是什么属性的元素都会环绕其表现。如下代码：

<div class="left"></div>
<div class="right">在学完css中浮动的效果后还是有一点蒙，为了更好的认识及使用浮动，现在整理一下思路。
浮动，最初是用来实现文字环绕图片的效果，所以如果将某一个元素打上浮动标签，其后面紧跟的一个元素就会紧跟浮动形成环绕效果。为了实现这种效果，就使得浮动具有两个特性：包裹与破坏。包裹是指不论元素以前具有什么属性，在float化之后，元素会具有block属性，即其具有了块状元素的特点，可以不受外部元素的影响，并自成一行。但又因为其具有破坏性，使得父元素高度塌陷，随之而来的就是后一个标签不论是什么属性的元素都会环绕其表现。
</div>

<style>
.left{width:200px;height:10px;background:#0033FF;float:left;}
.right{background:#CCCCCC;}
</style>

这样实现的效果为



可以看到，当下一个标签中的内容多于前一个时，会自动环绕在其四周。这样就带来新的问题：如何清除浮动带来的影响。

在清除其下一级的环绕效果时，可采用clear实现，如上例，前一级是左浮，则可用clear:left，当然也可以用clear:both。

.right{background:#CCCCCC;clear:left;}

效果为：



但是，当浮动外还有一层div时，并且其内元素均为浮动时，clear就不能发挥作用了。如果在上面例子中加一个外标签将left和right包裹起来，再设置border我们会发现其仍有高度：

<div id="wrap">
<div class="left"></div>
<div class="right">在学完css中浮动的效果后还是有一点蒙，为了更好的认识及使用浮动，现在整理一下思路。
浮动，最初是用来实现文字环绕图片的效果，所以如果将某一个元素打上浮动标签，其后面紧跟的一个元素就会紧跟浮动形成环绕效果。为了实现这种效果，就使得浮动具有两个特性：包裹与破坏。包裹是指不论元素以前具有什么属性，在float化之后，元素会具有block属性，即其具有了块状元素的特点，可以不受外部元素的影响，并自成一行。但又因为其具有破坏性，使得父元素高度塌陷，随之而来的就是后一个标签不论是什么属性的元素都会环绕其表现。
</div>
</div>

#wrap{border:4px solid #33FF66;}

这是因为right部分并没有设置浮动，其文字具有的高度撑开了父元素的高度，现在将right也设置为浮动。

<style>
#wrap{border:4px solid #33FF66;clear:both;}
.left{float:left;width:200px;height:10px;background:#0033FF;}
.right{background:#CCCCCC;float:left;width:1300px;}
</style>

（浮动元素最好设置宽度，像上例，没有设置 宽度时，不会产生浮动效果，具体原因我也还没发现）设置宽度和浮动，再设置父层clear:both后效果为



可以发现父元素并没有被撑开，我所常用的一种方法是：设置父层overflow:hidden

#wrap{border:4px solid #33FF66;overflow:hidden;}

可以看见父元素高度塌陷问题解决。但由于浏览器的不同，overflow:hidden不一定能在所有浏览器上起作用，可以配合zoom:1使用。

浮动还会忽略margin值，主要原因在于float脱离了标准文档流但又没有absolute脱离的彻底，当元素浮动后，其后的内容会环绕其显示，但margin值并不是从浮动元素的边缘开始计算的，而是根据上一级标签的范围边界开始算的，就导致写了margin值还是紧贴浮动元素，只要设置margin值够大，比如等于浮动元素宽度加一小段距离就能显示了。比较方便的是，浮动对padding值敏感，可用padding代替margin。

对于浮动实现两列三列布局，可将块中分成两到三个块，分别浮动，padding设距离，注意浮动设置宽度，父元素overflow。

但由于浮动在ie6,ie7中会带来一些奇怪的问题，比如在7中会出现clear的包裹范围问题，最后两个浮动元素的垂直间距问题，阶梯问题还有右浮不会在同一行显示问题，所以浮动要慎用，一旦排版发生变化，很可能出现错位现象。