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

前面的話

浮動最早的使用是出自<img src="#" align="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視頻教程