div 浮動框

• 博客園
• 閃存
• 首頁
• 新隨筆
• 管理
• 訂閱

隨筆- 61  文章- 0  評論- 16 

CSS浮動

1、 定義

    浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

 

2、 浮動與不浮動

                             

    浮動與不浮動有不少的區別，但主要的區別是不浮動的框是由上往下獨佔一行的，而浮動的框是緊靠着排列的。上（右）圖中d一、d二、d3都是向左浮動的，因此先把d1放在緊靠着父框擺放，而後把d2緊靠着d1擺放，最後d3緊靠着d2擺放。向右浮動亦與之相似。

 

語法：
float : none | left |right
參數：
none : 　對象不浮動
left : 　對象浮在左邊
right : 　對象浮在右邊

 

3、 調整

                              

    如上（左）圖所示，若是包含框太窄，沒法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。

    如上（右）圖所示，若是浮動元素的高度不一樣，那麼當它們向下移動時可能被其它浮動元素「卡住」。

    本小節d一、d二、d3均向左浮動。

 

4、 環繞與清除

                                   

    上圖中d1向左浮動，d二、d3都不浮動。 一開始的定義中就有說到，浮動的框的是脫離普通流的，即d1就浮在上面的，下面的d二、d3感受不到d1的存在。因此d2在父框中處於頂端。並且d2中的 內容不會覆蓋d1中的內容，咱們能夠利用這一點作出環繞效果。好比d1中放的是一張圖片，d2中是圖片的解釋。這樣就十分合理。

 

                                 

    但若是d1與d2是不相關的，就想要d2另起一行。那就要使用另外一個CSS屬性clear。clear屬性用於設置框的左邊或右邊或兩邊不挨着浮動框。上圖d1向左浮動，d二、d3不浮動，且d2的clear屬性爲left。

 

語法：

clear : none | left |right | both
參數：
none : 　容許兩邊均可以有浮動對象
both : 　不容許有浮動對象
left : 　不容許左邊有浮動對象
right : 　不容許右邊有浮動對象

                                              

    另外，雖然不浮動的框感受到不到浮動框的存在，但浮動框卻知道不浮動框的存在。如上圖，d1是不浮動的，d二、d3都是向左浮動的，d2可以另起一行而不覆蓋到d1。

 

5、 注意

(1) 本文只做原理性的解釋，IE與FireFox的一些差別在這裏就不羅列了。

(2) 文中的框便是div。