|
|
作者：老王
在使用Div+Css布局的时候，Float往往比Position更常用，有以下几个值：left，right，none。
Left：元素会移至父元素中的左侧。
Right：元素会移至父元素中的右侧。
None：元素会显示于它在文档中默认出现的位置。
Float的概念很简单，但是实际使用的时候，浮动溢出的问题却很棘手。所谓“浮动溢出”是指：当容器内有浮动元素的时候，由于浮动元素已经脱离了流，所以容器的高度不能自动伸长以适应浮动元素的高度，使得内容溢出到容器外面。
下面代码演示可以看出浮动溢出的实际情况，为了方便，我给外部容器设置了一个边框：
<div style="border:1px solid #000000;">
<div style="float: left;">hello, world.</div>
</div>
方法一：W3推荐的解决方法（相关链接）是在浮动元素的下面使用clear，代码如下：
<div style="border:1px solid #000000;">
<div style="float: left;">hello, world.</div>
<div style="clear: both;"></div>
</div>
虽然这是W3推荐的标准方法，但是在网页里平白无故加入一个空的Div，无论如何都是坏味道。
方法二：有人提出了利用overflow清除浮动的方法，代码如下：
<div style="border:1px solid #000000; overflow: auto; zoom: 1;">
<div style="float: left;">hello, world.</div>
</div>
或者：
<div style="border:1px solid #000000; overflow: hidden; zoom: 1;">
<div style="float: left;">hello, world.</div>
</div>
其中的zoom是为了兼容IE。
可惜overflow有时候会引起一些意料之外的麻烦（相关链接），所以，还是少用为妙。
方法三：利用after伪类清除浮动的方法，代码如下：
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1;
}
</style>
<![endif]-->
---
<div style="border:1px solid #000000;" class="clearfix">
<div style="float: left;">hello, world.</div>
</div>
其中的<!--[if IE]>...<![endif]-->部分是为了兼容IE。
如果你浏览blueprint的源代码（grid.css文件），你会发现它使用的就是这个方法。
这个方法显得稍微复杂了些，需要了解原理的网友可以自己研究（相关链接）。
参考链接：http://www.guitarbean.com/topic/clearfloat/index.html |
|
IP卡
狗仔卡
发表于 2009-11-29 00:55:14
收藏
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
发表于 2010-1-19 06:05:03