首頁 > web前端 > css教學 > 主體

float怎麼用? css:float浮動使用總結

伊谢尔伦
發布: 2017-06-05 15:33:13
原創
2849 人瀏覽過

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

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

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

CSS 在线手册

#2. 觀看 《黑馬程式設計師css影片教學》中的浮動章節

float怎麼用? css:float浮動使用總結

#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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!