CSS學習（二）—浮動，css學習浮動

CSS學習（二）—浮動，css學習浮動

一、 定義

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

解決的問題：“如何在一行顯示多個div元素”

二、 浮動與不浮動區別    

圖1           

圖2

 

區別

   不浮動的框是由上往下獨佔一行的，而浮動的框是緊靠著排列的。圖2中d1、d2、d3都是向左浮動的，所以先把d1放在緊靠著父框擺放，然後把d2緊靠著d1擺放，最後d3緊靠著d2擺放。向右浮動亦與之類似。

文法：

float : none | left |right

參數：

none : 對象不浮動

left : 對象浮在左邊

right : 對象浮在右邊

三、浮動執行個體

div是區塊層級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的標準流。如：

   可以看出，即使div1的寬度很小，頁面中一行可以容下div1和div2，div2也不會排在div1後邊，因為div元素是獨佔一行的。   

   浮動可以理解為讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。

情況1：div2左浮動

    假設中的div2浮動，那麼它將脫離標準流，但div1、div3、div4仍然在標準流當中，所以div3會自動向上移動，佔據div2的位置，重新組成一個流。

div1、div3、div4依次排列，成為一個新的流。又因為浮動是漂浮在標準流之上的，因此div2擋住了一部分div3，div3看起來變“矮”了。

是d1、d2、d3左移時出現的兩種情況

 圖1：                       

圖2：

    圖1中無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。

    圖2中如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”。

情況2：div2右浮動

右浮動(float:right;)當然就是靠右排列。如果我們把div2採用右浮動，會是如下效果：

 

此時div2靠頁面右邊緣排列，不再遮擋div3，可清晰的看到上面所講的div1、div3、div4組成的流。

目前為止我們只浮動了一個div元素.

 

情況3：div2和div3左浮動

   由於div2、div3浮動，它們不再屬於標準流，因此div4會自動上移，與div1組成一個“新”標準流，而浮動是漂浮在標準流之上，因此div2又擋住了div4。

 

div2在每個例子中都是浮動的，但並沒有跟隨到div1之後。得結論：

   假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。

 

小結：

div的順序是HTML代碼中div的順序決定的。

靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是後。

情況4：div2、div3、div4都設定成左浮動

   div2發現上邊的元素div1是標準流中的元素，因此div2的相對垂直位置不變，頂部仍然和div1元素的底部對齊。由於是左浮動，左邊靠近頁面邊緣，所以左邊是前，因此div2在最左邊。

 

情況5：div2、div3、div4都設定成右浮動

由於是右浮動，因此右邊靠近頁面邊緣，所以右邊是前，因此div2在最右邊。

 

情況6：div2、div4左浮動

    div2、div4浮動，脫離了標準流，因此div3將會自動上移，與div1組成標準流。div2發現上一個元素div1是標準流中的元素，因此div2相對垂直位置不變，與div1底部對齊。div4發現上一個元素div3是標準流中的元素，因此div4的頂部和div3的底部對齊，並且總是成立的，因為可以看出，div3上移後，div4也跟著上移，div4總是保證自己的頂部和上一個元素div3(標準流中的元素)的底部對齊。

    可以看出：元素浮動之前，也就是在標準流中，是豎向排列的，而浮動之後可以理解為橫向排列。

 

四、清除浮動

    清除浮動可以理解為打破橫向排列。

清除浮動的關鍵字是clear，官方定義如下：

文法：

clear: none left right both

取值：

none  :  預設值。允許兩邊都可以有浮動物件

left   :  不允許左邊有浮動物件

right  :  不允許右邊有浮動物件

both  :  不允許有浮動物件

 

情況1：div1與div2為兩行（兩個）

希望得到：div1沒有浮動，而div2左浮動效果

    用到清除浮動（clear），我們剛開始會寫：在div1的CSS樣式中添加clear:right;理解為不允許div1的右邊有浮動元素，由於div2是浮動元素，因此會自動下移一行來滿足規則。

其實這種理解是不正確的，這樣做沒有任何效果。

清除浮動規則：只能影響使用清除的元素本身，不能影響其他元素。

    如果採用div1的clear right，這個清除浮動是在div1中調用的，它只能影響div1，不能影響div2。要想讓div2下移，就必須在div2的CSS樣式中使用浮動。因此只要在div2的CSS樣式中使用clear:left，來指定div2元素左邊不允許出現浮動元素，這樣div2就被迫下移一行。

情況2：div1、div2都是右浮動

    此時如果要讓div2下移到div1下邊，要如何做呢？

    我們希望移動的是div2，就必須在div2的CSS樣式中調用浮動，因為浮動只能影響調用它的元素。可以看出div2的右邊有一個浮動元素div1，那麼我們可以在div2的CSS樣式中使用clear:right;來指定div2的右邊不允許出現浮動元素，這樣div2就被迫下移一行，排到div1下邊。

五、 環繞與清除  

                            

   中d1向左浮動，d2、d3都不浮動。一開始的定義中就有說到，浮動的框的是脫離普通流的，即d1就浮在上面的，下面的d2、d3感覺不到d1的存在。所以d2在父框中處於頂端。而且d2中的內容不會覆蓋d1中的內容，我們可以利用這一點做出環繞效果。比如d1中放的是一張圖片，d2中是圖片的解釋。這樣就十分合理。

執行個體：

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。

因此，建立浮動框可以使文本圍繞映像：

     

   但如果d1與d2是不相關的，就想要d2另起一行。那就要使用另一個CSS屬性clear。clear屬性用於設定框的左邊或右邊或兩邊不挨著浮動框。d1向左浮動，d2、d3不浮動，且d2的clear屬性為left。                                 

   另外，雖然不浮動的框感覺到不到浮動框的存在，但浮動框卻知道不浮動框的存在。如，d1是不浮動的，d2、d3都是向左浮動的，d2能夠另起一行而不覆蓋到d1。

六、 注意

（1）文中的框即是div。

（2）對於行內標籤，比如span，clear屬性不會起到任何效果。clear屬性的功能僅僅是解決塊（block)級標籤跟在浮動塊之後會忽略浮動塊所佔位置的問題。

（3）用這種浮動塊可以使用div來構建分欄布局，也就是上文說的那種多個div浮動，然後用頁尾clear:both的方式進行分欄。

（4）如果你的頁面使用css浮動之後擠壓在一起，試試clear屬性

CSS中的定位與浮動

定位與浮動是網頁布局中用得最多的，它們的存在肯定有意義，浮動簡單易理解，定義相對抽像，浮動實現不了的定位卻能實現（比如把元素放到父級之外），看實際需要；

如果你覺得它們沒有意義或者重複，那是因為你對它們理解得還不夠深刻，建議多操作
 
css 怎使浮動的板塊置中

二種方法

1、父級div設定固定寬度後加margin:0 auto; 然後子級div加浮動，即可實現；不過次方法不能無限伸展；

2、在table插入入div，div設定浮動，在table上設定margin:0 auto; 而table不要設定寬度，因為table預設是寬度最小化的，實現置中的效果會比較好，而且可以無限伸展

註：有些老是說table不好，除非是做表格，其他地方絕對不要用，其實我個人是比較喜歡用table布局的，不過重點布局還是div+css，在一些容易出錯的或者必須的地方用table也是不錯的選擇，人人都說div+css布局，我呢可以說是div+table+css布局