float和clear都是布局的属性

float和clear都是布局的属性

float
取值:
none  :  默认值。对象不飘浮
left  :  文本流向对象的右边
right  :  文本流向对象的左边

说明:
该属性的值指出了对象是否及如何浮动。请参阅 clear 属性。
当该属性不等于 none 引起对象浮动时,对象将被视作块对象( block-level ),即 display 属性等于 block 。也就是说,浮动对象的 display 属性将被忽略。
跟随浮动对象的对象将移动到浮动对象的位置(这两个属性总是结合考虑1.float样式元素2.float样式元素的下面一个元素 跟其他元素无关)。浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。
在IE5+中, div 和 span 对象假如没有指定宽度会被分配默认的宽度,而在此前的浏览器版本中则必须指定宽度值才可以呈递此属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 styleFloat 。


clear
取值:
none  :  默认值。允许两边都可以有浮动对象
left  :  不允许左边有浮动对象
right  :  不允许右边有浮动对象
both  :  不允许有浮动对象

说明:
该属性的值指出了不允许有浮动对象的边。请参阅 float 属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 clear 。

这个是clear的:(css手册上面的例子)

<html xmlns:rdl> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Rainer's Handbook</title> <style> body{margin:0px;padding:12px;background:#FFFFFF;overflow:auto;} body,table,input,select,textarea,a{font-family:verdana,tahoma,arial;font-size:11px;color:#000000;word-break:break-all;} table,img{border:0px;} a{text-decoration:none;color:#003399;} a:hover{color:#000000;text-decoration:underline;} #id_div3{padding-top:8px;border-top:1px solid #000000;line-height:15px;} #id_span3{font-size:10px;font-family:tahoma;} </style> <style> #idParentDiv{width:100%;padding:6px;background-color:buttonshadow;} #idDiv1{color:#FFFFFF;padding:4px;clear:none;} #idDiv2{width:150px;height:40px;background-color:#FF6633;color:#FFFFFF;padding:4px;float:none;} #idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;} </style> <script> function rdl_change(e){ var oCodeDiv=document.all("idCodeDiv"); var oDiv1=document.all("idDiv1"); var oDiv2=document.all("idDiv2"); with (document.all("idSel1")){ if (selectedIndex!=0) var sValue1=options[selectedIndex].value; else var sValue1="none" } with (document.all("idSel2")){ if (selectedIndex!=0) var sValue2=options[selectedIndex].value; else var sValue2="none" } oDiv1.style.clear=sValue1; oDiv2.style.styleFloat=sValue2; oCodeDiv.innerHTML="#idDiv1 { clear : "+sValue1+" ; }"+"<br>"+"#idDiv2 { float : "+sValue2+" ; }"; } </script> </head> <body> <div id=idParentDiv> <div id=idDiv2>我的ID是<b> idDiv2 </b>。请选择我的<b> float </b>属性的值。</div> <div id=idDiv1>我的ID是<b> idDiv1 </b>。请从下方的第一个选择框内选择我的<b> clear </b>属性的值。从第二个选择框内选择<b> idDiv2 </b>的<b> float </b>属性的值。</div> </div> <br> <table><tr><td> <select id="idSel1" onchange="rdl_change();"> <option value="null" style="font-weight:bold;">---clear--- <option value="none">none <option value="left">left <option value="right">right <option value="both">both </select> </td><td> <select id="idSel2" onchange="rdl_change();"> <option value="null" style="font-weight:bold;">---float--- <option value="none">none <option value="left">left <option value="right">right </select> </td></tr></table> <div id=idCodeDiv>#idDiv1 { clear : none ; }<br>#idDiv2 { float : none ; }</div> <br>&nbsp;<br>&nbsp;<br> <div id=id_div3>苏昱作品·版权所有<br><span id=id_span3>&copy;2002 Rainer Su . All rights reserved .</span></div> </body> </html>

运行代码 复制代码另存代码  提示:您可以先修改部分代码再运行

 
 
我的ID是 idDiv2 。请选择我的 float属性的值。
我的ID是 idDiv1 。请从下方的第一个选择框内选择我的 clear属性的值。从第二个选择框内选择 idDiv2 float属性的值。

---clear---noneleft rightboth ---float--- noneleft right
#idDiv1 { clear : none ; }
#idDiv2 { float : right ; }

 

 

你可能感兴趣的:(float和clear都是布局的属性)