CSS float和CSS clear


float 屬性定義元素在哪個方向浮動。

image

浮動元素會生成一個塊級框,而不論它本身是何種元素。

如果浮動非替換元素,則要指定一個明確的寬度;否則,它們會盡可能地窄。

注釋:假如在一行之上只有極少的空間可供浮動元素,那么這個元素會跳至下一行,這個過程會持續到某一行擁有足夠的空間為止。

請看下圖,當把框 1 向右浮動時,它脫離文檔流並且向右移動,直到它的右邊緣碰到包含框的右邊緣:

CSS 浮動實例 - 向右浮動的元素

再請看下圖,當框 1 向左浮動時,它脫離文檔流並且向左移動,直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文檔流中,所以它不占據空間,實際上覆蓋住了框 2,使框 2 從視圖中消失。

如果把所有三個框都向左移動,那么框 1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前一個浮動框。

CSS 浮動實例 - 向左浮動的元素

如下圖所示,如果包含框太窄,無法容納水平排列的三個浮動元素,那么其它浮動塊向下移動,直到有足夠的空間。如果浮動元素的高度不同,那么當它們向下移動時可能被其它浮動元素“卡住”:

CSS 浮動實例 2 - 向左浮動的元素

 

clear 屬性規定元素的哪一側不允許其他浮動元素。

image

 

參考:

http://www.w3school.com.cn/css/css_positioning_floating.asp

http://www.w3school.com.cn/css/css_positioning.asp


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM