float和clear属性

返回文章首页
创建时间：一月 3th, 2008修改时间：一月 3th, 2008 Traffic(499)

一、Float

1、语法：float:none/ left / right

2、参数：

（1）none：默认值，对象不漂浮

（2）left：对象浮在左边，或者说文本浮在对象的右边

（3）right：对象浮在右边，或者说文本浮在对象的左边

3、说明：

该属性的值指出了对象是否及如何浮动。请参阅clear属性。

当该属性不等于none引起对象浮动时，对象将被视作块对象（block-level），即display属性等于 block 。也就是说，浮动对象的display属性将被忽略。跟随浮动对象的对象将移动到浮动对象的位置。

设置浮动后还有一个特性，就是当对象没有设置宽和高时，对象随内容的多少而决定大小（即自适应大小），最大范围不会超过其父对象。

对应的脚本特性为：styleFloat。

4、示例：

#left {float:left}

#left img {float:left}

5、提示：

（1）运行实例可以看到，文字漂浮在图片的右侧。如果把#left img {float:left}属性去掉，文字则没有漂浮，由此可见，float不具有继承性。有兴趣的朋友可以把#left img {float:left}改为#left img {float:right}看看效果。

（2）运行实例可以看到，右侧的对象漂浮在左侧的右边，是因为左侧对象设置了float:left属性。但细心的朋友可以看到，在IE下左侧和右侧对象之间有大约3个像素的间距，这就是IE下一个典型的双边距BUG的表现之一。而且在FireFox下的两个对象也重叠了起来。如图：

这样显然达不到我们之前所说的浏览器兼容的标准。解决办法是在#right中插入一行代码：float:left;，使其向左侧对象的边缘浮动，这样问题就全解决了。如果想让两个对象之间有距离，可以设置对象的margin属性。

二、Clear

1、语法：clear : none/ left / right / both

2、参数：

（1）none：默认值，允许两边都可以有浮动对象。

（2）left：不允许左边有浮动对象。

（3）right：不允许右边有浮动对象。

（4）both：不允许有浮动对象。

3、说明：

该属性的值指出了不允许有浮动对象的边。

对应的脚本特性为：clear。

4、示例：

5、提示：

（1）right对象设置了clear:left，即取消了左边的浮动，所以换行显示。

（2）clear:both还有一个用途，就是在FireFox下如果不设置对象的float属性，这个对象的高度默认是0。所带来的后果就是，当对象设置了背景色或背景图片时显示不出来。

解决办法是在对象内部建立一个子对象，设置子对象的clear属性为both就可以解决这个问题。

Posted by: 近水社区
相关文章：
相关模板：
暂无相关模板

Comments(0)

暂无留言。
User Name:
（必添）
User Email:
（必添）
User URL:
Comment:
（必添）