尽享网Css教程16:浮动要素

 2012-03-04 01:46:55   评论   891次浏览

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

 

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

 

浮动

 

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

H4 { float: left }

 

本标题文字为向左浮动。

 

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

 

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

 

清除

 

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

P { clear: left }

蚂蚁森林为我浇水吧!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: