你所不知道的CSS浮動小知識

前面的話

浮動最早的使用是出自right ">，用於文字環繞圖片的排版處理。如今浮動作為CSS中常用的佈局方式，本文將就浮動內容做詳細介紹和梳理

定義

float 浮動

浮動元素脫離普通流，然後按照指定方向，向左或向右移動，碰到父級邊界或另一個浮動元素停止

值: left | right | none | inherit

初始值: none

應用於: 所有元素

繼承性: 無

[注意]若浮動一個非替換元素，則必須為該元素聲明一個width，否則，根據CSS規範，元素的寬度趨於0

特性

【1】浮動流

#正常流中元素一個接一個排列；浮動元素也構成浮動流

【2】塊級框

浮動元素本身會產生一個區塊級框，而不管這個元素本身是什麼，使浮動元素周圍的外邊距不會合併

【3】包裹性

浮動元素的包含塊是指其最近的塊級祖先元素，後代浮動元素不應該超出包含塊的上、左、右邊界。若不設定包含塊的高度，包含塊若浮動，則包含塊會延伸，進而包含其所有後代浮動元素；若不設置包含塊的寬度，包含塊若浮動，則包含塊寬度由後代浮動元素撐開

【4】破壞性

浮動元素脫離正常流，並破壞了自身的行框屬性，使其包含區塊元素的高度塌陷，使浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框重新排列

表現

[1]浮動元素的左(或右)外邊界必須是在來源文件中先前出現的左浮動(或右浮動)元素的右(左)外邊界。除非後出現浮動元素的頂端在先出現浮動元素的底端下面

[2]左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。右浮動元素的左外邊界也不會在其左邊任何左浮動元素的右外邊界的左邊

[3]左(或右)浮動元素左邊(右邊)有另一個浮動元素，前者右外邊界不能在其包含塊右(左)邊界的右邊(左邊)

[4]浮動元素的左(或右)外邊界不能超出其包含塊的左(或右)內邊界

[5]一個浮動元素的頂端不能比其父元素的內頂端更高。如果一個浮動元素在兩個合併外邊距之間，放置這個浮動元素時就好像在兩個元素之間有一個塊級父元素

[6]浮動元素的頂端不能比之前所有浮動元素或區塊級元素的頂端較高

[7]如果來源文件中一個浮動元素之前出現另一個元素，浮動元素的頂端不能比包含該元素所產生框的任何​​行框的頂端要高

[8]浮動元素必須盡可能高地放置

[9]左浮動元素必須向左盡可能遠，右浮動元素則必須向右盡可能遠。位置越高，就會向右或向左浮動得越遠

重疊

浮動元素超出父元素邊界的方法有兩種：一種是浮動元素的寬度大於父元素的寬度，另一種就是設定負外邊距。如果浮動元素存在負外邊距，且浮動元素與正常流元素重疊

【1】行內框與一個浮動元素重疊時，其邊框、背景和內容都在該浮動元素之上顯示

【2】方塊與一個浮動元素重疊時，其邊框和背景在該浮動元素之下顯示，而內容在浮動元素之上顯示

【相關推薦】

1. 免費css線上影片教學

2. css線上手冊

3. php.cn獨孤九賤（ 2）－css影片教學

以上是你所不知道的CSS浮動小知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！