對於開發人員來說,float浮動是需要經常使用的,基本上離不開它,卻常常忍受著它給你帶來的種種痛苦,也許你覺得它就那麼一點兒知識,但是你真的能駕馭它麼? css float浮動也就是我們所說標籤物件浮動居左靠左(float:left)和浮動居右靠右(float:right)。浮動可以理解為讓某個DIV元素脫離標準流,漂浮在標準流之上,和標準流不是一個層次。本章節就來聊聊 float浮動的使用方法。
可以先學習php中文網相關的免費課程
#1. 學習《CSS 線上手冊》中的CSS Float(浮動) 課程
#2. 觀看 《黑馬程式設計師css影片教學》中的浮動章節
#float浮動相關內容
#1. float最初的設計初衷,是為了實現圖文混排效果,讓文字環繞圖片。如今的用法基本上都是為了實現橫向排版,雖然是一種“誤用”,但往往能達到我們想要的效果。大部分人知道用float,但卻不是所有人都知道float的原理和設計初衷。 2. 假如某個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,怎麼解決?######【相關推薦】
1. php中文網免費教學:《CSS 0基礎入門教學》
2. php中文網路免費影片教學:《php.cn獨孤九賤(2)-css影片教學》
#以上是float怎麼用? css:float浮動使用總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!