codecamp

3.7 浮动要素

3.7 浮动要素


我们在网页中经常看到浮动的图象和表格,只需对一个<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段文字没有包裹。


3.6 边框
3.8 第3天的练习
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }