CSS樣式中的浮動屬性是指元素在文檔流中脫離出來,以便在頁面中更加靈活地擺放。此屬性常用于制作頁面布局,將元素向頁面的左側(cè)或右側(cè)靠攏,從而使頁面更加美觀。
浮動屬性主要有兩個取值:left和right。當(dāng)浮動元素使用left作為屬性值時,它會向左側(cè)浮動,而使用right作為屬性值時則會向右側(cè)浮動。在進行浮動布局時,通常還要給浮動元素設(shè)置寬度(通常為百分比),否則浮動元素會充滿整個父容器。
.float-left { float: left; width: 50%; } .float-right { float: right; width: 50%; }
除此之外,還可以通過設(shè)置clear屬性來清除浮動。當(dāng)一個元素旁邊有浮動元素時,這個元素可能會因為浮動元素的存在而無法正常顯示。清除浮動后,這個元素就可以正確地顯示了。
clear屬性有三個取值:left、right和both。當(dāng)設(shè)置為left時,浮動在左側(cè)的元素會被清除;設(shè)置為right時,浮動在右側(cè)的元素會被清除。當(dāng)設(shè)置為both時,則會清除兩側(cè)的浮動。
.clearfix { clear: both; }
需要注意的是,浮動元素可能會對父容器造成影響。當(dāng)所有子元素都是浮動元素時,父容器的高度會坍塌為0。為了避免這種情況的發(fā)生,可以使用clearfix技巧來清除浮動元素對父容器的影響。
上一篇css手機版靜止放大
下一篇css樣式做出心形