在CSS3中,float是一個(gè)非常重要的屬性,它可以使元素浮動(dòng)到父元素的左側(cè)或右側(cè)。
float屬性主要用于元素的布局,通過設(shè)置float屬性,可以實(shí)現(xiàn)多列布局、圖片與文字混排等效果。
在設(shè)置float屬性時(shí),常常需要同時(shí)設(shè)置width屬性,否則元素會(huì)自動(dòng)擴(kuò)展至父元素的全部寬度。
.example{ float:left; width:200px; }
當(dāng)元素浮動(dòng)到左側(cè)時(shí),其右側(cè)的空白區(qū)域會(huì)留給其它元素,如果父元素寬度不夠,子元素會(huì)自動(dòng)換行。
另外,還有clear屬性可以清除元素的float屬性。當(dāng)一個(gè)元素的兩側(cè)都有浮動(dòng)元素時(shí),需要在該元素中設(shè)置clear來避免出現(xiàn)布局錯(cuò)亂的情況。
.clearfix{ clear:both; }
總之,float屬性是CSS3中非常重要的一個(gè)屬性,通過使用它,可以實(shí)現(xiàn)各種布局效果,靠它實(shí)現(xiàn)的多列布局和圖片與文字混排效果也是web開發(fā)中不可或缺的技巧。