html視覺格式化模型之浮動

浮動的應用場景，浮動起初誕生的時候呢，是為了解決文字環繞的效果，到現在呢，浮動多數用於橫向的排列，雖然說css3和其他能提供更好的排列方法，但是相容性並沒有浮動的好。所以現在很多大廠用的橫向排列方法，還是用的浮動比較多。

常規流排列：

浮動排列：

看看**頁面的橫向排列，用的也是浮動

浮動的基本特點。

float：none(預設值)

常用的屬性值有：

left：左浮動，元素在包含塊(父元素的內容區)的最上邊靠左邊開始排列

right：右浮動，元素在包含塊的最上邊右邊開始排列

注意：當乙個元素進行浮動後，元素必定為塊盒。display屬性變為：block。

浮動盒子的尺寸問題

1、寬度為auto時，並不會像常規流一樣撐滿內容區。而是，自動適應內容的寬度，也就是內容有多寬，寬度就有多少

2、高度為auto時，適應內容的高度，內容佔多少，就有多高

3、margin為auto時，(常規流中margin：0 auto；為居中效果)，在浮動裡面，auto時，值為0，並不會填滿內容區

4、padding、margin、border、width等值，設定為百分比的時候，會根據包含塊的寬度(width)進行取值。記住是width，別理所當然的覺得，浮動元素的padding-top是取的包含塊的height。當然，浮動元素的height是取的包含塊的height。

盒子的排列

浮動盒子在包含塊中排列時，遇到常規流的塊盒，會避開，給他讓位置

常規流的塊盒在浮動盒子的包含塊裡面排列，會直接無視浮動盒子的位置

行盒在排列時，會避開浮動盒子

margin上下合併的規則並不會在浮動盒子裡面發生

最後一點，文字的話，他始終都會避開浮動盒子，文字如果沒有在行盒中，瀏覽器會自動生成乙個行盒包裹文字，該行盒叫做匿名行盒。該盒子看不見，但是塊盒還是塊盒，只是文字的排列方式變成了行盒的樣子

浮動的缺點

會產生高度坍塌。

解決辦法：

清除浮動：clear：none(預設值)

left：清除左浮動，該元素必須出現在所有左浮動盒子的後面。

right：清除右浮動，該元素必須出現在所有右浮動盒子的後面。

both：清除左右浮動，該元素必須出現在所有浮動盒子的後面。