建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > css教程 >

7.CSS浮动要素

时间:2009-03-09 11:07来源: 作者: 点击:
我们在网页中经常看到浮动的图象和表格,CSS只需 对一个IMG标签使用ALIGN=left属性,文字就会 绕到浮动图象的右边继续显示。样式表对于浮动 要素有一个更为灵活的语法,也就是本篇中将要 谈到的主题。
我们在网页中经常看到浮动的图象和表格,CSS只需 对一个<IMG>标签使用ALIGN=left属性,文字就会 绕到浮动图象的右边继续显示。样式表对于浮动 要素有一个更为灵活的语法,也就是本篇中将要 谈到的主题。

(IE3和IE 4不支持本页中谈到的任何功能。如果 你使用IE 4,你将会看到一些奇怪的格式。)

浮动

浮动属性使你能将一个要素周围用文字包裹,不 仅仅是包裹图象,而且能包裹整块的文字。

    H4 { float: left }

本标题文字为向左浮动。

你可以看到这项CSS 规则应用于<H4>的文字。而本段内容则包裹在标 题文字的右下边,就象是用文字包裹图象时的效 果那样。你也可以使用向右浮动的参数值。

如果浮动要素周围的边距太小,你可以使用之前 学过的空格填充属性给它加大四周的空间(但似 乎使用边距会造成问题)。

清除

如果你想使一段文字包裹某一要素,而下一段文 字不包裹,你可以使用clear属性,很象HTML的 CLEAR属性的用法(例: CLEAR=right)。

    P { clear: left }

例:

day3_7b.gif (12436 bytes)

第1、2段文字包裹了向左浮动的第1幅图象。

而使用了清除(clear)属性后,第4、5段文字中 只有第4段包裹了图象,而第5段文字没有包裹。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片