CSS浮動寫法

這一章主要記錄定位與浮動常用的。

1.浮動

說到浮動我們要先說說標準流和浮動流。

1.標準流

標準流很常見，瀏覽器預設的方式就是標準流。
標準流怎麼理解呢？
實作我們得知道CSS中的三種元素分類。

行內元素，區塊級元素，行內區塊級元素

#行內元素	# 區塊級元素	行內區塊級元素
不獨佔一行	獨佔一行	不獨佔一行
預設和內容一樣寬	預設和父元素一樣寬	#預設和內容
不可以設定寬高	可以設定寬高	可以設定寬高

大概有三種元素的去差別就出來了。
在這裡插入另一個知識點：
在HTML中通常把元素（標籤）分成兩類：

容器級標籤	文字層級標籤
p h ul ol li dt等	span/p/em/ins等
#可以嵌套其他的所有標籤	只可以嵌套文字/圖片/超連結

#現在可以講講標準流了：

在標準流中有兩種排版方式，塊級元素依照垂直排版，行內元素和行內塊級依照水平排版，順著來

2.浮動流

浮動的屬性：

#清除float##浮動left/right左/右不允許浮動left/right左浮動/右浮動both/none皆不可/不清除none

clear	清除	float	#clear

不浮動

浮動有幾點要注意：

浮動是指設定浮動之後的元素會怎麼浮動在他周圍！ ！ ！

例如right表示後面的元素會排在他左邊！ ！ ！

浮動流不區分是什麼元素，只可以水平排版，沒有居中（center）,不可以使用margin: 0 auto；均可以設定寬高。 特點#前一個浮動後面一個沒有，那麼前面一個會蓋住後面一個（文字不會蓋住，會環繞在周圍），這裡可以試著去想想都浮動的排列景象。 先浮動的會在前面，後浮動的會在後面浮動之後的位置由浮動之前在標準流中的位置來確定，這裡主要是理解為浮動後什麼元素會受影響左浮動會去找左浮動，右浮動會跟在右浮動後面當父元素寬度可以顯示所有浮動時，並排顯示

浮動的貼靠主要是指當父元素寬度不夠時會往前靠，怎麼理解呢，就是假如你一個視窗放了很多圖片把視窗寬度縮小時圖片會自動往下排的現象

###############

以上是CSS浮動寫法的詳細內容。更多資訊請關注PHP中文網其他相關文章！