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影片教學》

#

以上是float怎麼用？ css：float浮動使用總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！