CSS中的浮動(dòng)(float)屬性可用于左浮動(dòng)和右浮動(dòng),使得元素可以脫離文檔流,并左右移動(dòng),實(shí)現(xiàn)多列布局。
.left-float{ float:left; } .right-float{ float:right; }
在上述代碼中,通過設(shè)置float屬性的值為left或right,即可實(shí)現(xiàn)對元素的左或右浮動(dòng)。
當(dāng)浮動(dòng)元素的父元素高度不足以容納它時(shí),會(huì)導(dǎo)致浮動(dòng)元素向下移動(dòng),從而影響布局,此時(shí)可以使用清除浮動(dòng)(clear)來解決問題:
.clearfix:after{ content:""; display:block; clear:both; } .clearfix{ zoom:1; }
上述代碼通過偽元素after在浮動(dòng)元素的父元素末尾插入一個(gè)空塊元素,并通過設(shè)置clear屬性的值為both,使其清除父元素內(nèi)的浮動(dòng)元素。同時(shí),為了兼容IE瀏覽器,需要給父元素設(shè)置zoom屬性。
總結(jié)起來,通過float屬性和clear屬性的設(shè)置,可以輕松實(shí)現(xiàn)對元素的左右浮動(dòng)和清除浮動(dòng),從而達(dá)到多列布局的目的。