1. 程式人生 > >【javaweb】CSS浮動

【javaweb】CSS浮動

今天學到CSS的時候,有點懵,不知道怎麼使用,沒有完全理解,現在梳理一下。

(1)浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

   如我們把框 1 向右浮動時,它脫離文件流並且向右移動,直到它的右邊緣碰到包含框的右邊緣:

         

CSS æµ®å¨å®ä¾ - åå³æµ®å¨çåç´ 

如我們把三個框都向左移動,那麼框 1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前一個浮動框:

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

CSS æµ®å¨å®ä¾ 2 - å左浮å¨çåç´ 

(2)框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

如我們把框 1 向左浮動時,它脫離文件流並且向左移動,直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中,所以它不佔據空間,實際上覆蓋住了框 2,使框 2 從檢視中消失: