float怎麼用？css：float浮動使用總結

對於開發人員來說，float浮動是需要經常使用的，基本離不開它，卻常常忍受著它給你帶來的種種痛苦，也許你覺得它就那麼一點兒知識，但是你真的能駕馭它嗎？css float浮動也就是我們所說標籤對象浮動居左靠左（float:left）和浮動居右靠右(float:right)。浮動可以理解為讓某個DIV元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。本章節就來聊聊 float浮動的使用方法。

可以先學習php中文網相關的免費課程

1. 學習《CSS 線上手冊》中的 CSS Float(浮動) 課程

2. 觀看 《黑馬程式員css視頻教程》中的 浮動 章節

float浮動相關內容

1. float浮動你所不知道的用法詳解

float最初的設計初衷，是為了實現圖文混排效果，讓文字環繞圖片。如今的用法基本上都是為了實現橫向排版，雖然是一種“誤用”，卻往往能達到我們想要的效果。大部分人知道用float，但卻不是所有人都知道float的原理和設計初衷。

2. css浮動-float/clear的圖文詳解

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

3. float的正確用法，90%的人都用錯了

float還有一個很有用的特性，就是清除空格。這個我不貼圖片了，描述一下就好了。比如在一個p裡面放我張圖片，圖片與圖片之間預設會有幾像素的空格，也可以稱之為縫隙。但是往往這個縫隙或者空格並不是我們需要的，這時候只要給圖片一個float，讓其脫離文檔流，圖片與圖片之間將會嚴絲合縫的在一起。

4. css多個div浮動float高度自適應的兩種方法

採用 Div + CSS 進行三列或二列布局時，要使兩列（或三列）的高度相同，用 Table 很容易實現，但採用 Div + CSS 就顯得比較麻煩了。按照一般的做法，大都採用背景圖填充或 JS 指令碼的方法使高度相同。

5. 詳解CSS中float浮動

a.float的起源 浮動最初的設計是用來做文字的環繞效果的，這也是設計者想讓我們做的東西。

b.float的參數

　　float屬性的參數取值有三個：

　　left：表示元素浮動在左邊。

　　right：表示元素浮動在右邊。

　　none：對象不浮動，遵循標準文檔流。

c.效果展示（以float：left為例，float：right的情況只是位置的不同）

6. CSS基礎知識之float詳細介紹

浮動有4個屬性：left（左浮動）、right（右浮動）、none（不浮動）、inherit（繼承）。浮動元素的包含塊是其最近的塊級祖先元素。

浮動元素會左位移（或右位移），直到它的外邊界接觸到『包含塊的內邊界』或『另一個浮動元素的外邊界』。

相關問答

1. 如何解決float元素掉落的問題

2. html中使用float屬性,父元素高度會變為0,怎麼解決?

3. 哪些情況下float會失效？

【相關推薦】

1. php中文網免費教程：《CSS 0基礎入門教程》

2. php中文網免費視頻教程：《php.cn獨孤九賤（2）－css視頻教程》