float : none | left | right
取值:
none : 默认值。对象不飘浮
left : 文本流向对象的右边
right : 文本流向对象的左边
说明:
该属性的值指出了对象是否及如何浮动。请参阅 clear 属性。
当该属性不等于 none 引起对象浮动时,对象将被视作块对象( block-level ),即 display 属性等于 block 。也就是说,浮动对象的 display 属性将被忽略。
跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。
在IE5+中, div 和 span 对象假如没有指定宽度会被分配默认的宽度,而在此前的浏览器版本中则必须指定宽度值才可以呈递此属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 styleFloat 。
示例:
div { clear : left }
img { float: right }
应用于:
IE4.0+ APPLETBUTTONDIVEMBEDHnHRIFRAMEINPUT type=buttonINPUT type=resetINPUT type=submitMARQUEEOBJECTSELECTSPANstyleTABLETEXTAREA
IE5.0+ BBIGBLOCKQUOTEAADDRESSCENTERCITECODEcurrentStyleCUSTOMDDDFNDIRDLDTEMFIELDSETFORMIIMGINPUT type=checkboxINPUT type=fileINPUT type=imageINPUT type=passwordINPUT type=radioINPUT type=textISINDEXKBDLABELLEGENDLIMENULISTINGSMALLOLPPRERTRUBYruntimeStyleSSAMPSUBSUPSTRIKESTRONGTTUULVARXMP
IE5.5+ defaults
float:left; /*向左浮动*/
clear:left; /*清除浮动*/
可以实现一行两列或者一行三列之类的。 例如一行两列:
.content{ width:700px; height:30px;}
.left{ float:left; width:300px; background:black;}
.right{ float:right width:400px; background:red;}
就是靠左,靠右的意思!可以实现几个DIV在一行里~