浮動

浮動

視覺格式化模型，大致上將頁面中盒子的排列分爲三種方式：

1. 常規流
2. 浮動
3. 定位

應用場景

1. 文字環繞
2. 橫向排列

浮動的基本特色

修改float屬性值爲：

• left：左浮動，元素靠上靠左
• right：右浮動，元素靠上靠右

默認值爲none

1. 當一個元素浮動後，元素一定爲塊盒(更改display屬性爲block)
2. 浮動元素的包含塊，和常規流同樣，爲父元素的內容盒

盒子尺寸

1. 寬度爲auto時，適應內容寬度
2. 高度爲auto時，與常規流一致，適應內容的高度
3. margin爲auto，爲0.
4. 邊框、內邊距、百分比設置與常規流同樣

盒子排列

1. 左浮動的盒子靠上靠左排列
2. 右浮動的盒子考上靠右排列
3. 浮動盒子在包含塊中排列時，會避開常規流塊盒
4. 常規流塊盒在排列時，無視浮動盒子
5. 行盒在排列時，會避開浮動盒子
6. 外邊距合併不會發生

若是文字沒有在行盒中，瀏覽器會自動生成一個行盒包裹文字，該行盒叫作匿名行盒。

高度坍塌

高度坍塌的根源：常規流盒子的自動高度，在計算時，不會考慮浮動盒子

清除浮動，涉及css屬性：clear

• 默認值：none
• left：清除左浮動，該元素必須出如今前面全部左浮動盒子的下方
• right：清除右浮動，該元素必須出如今前面全部右浮動盒子的下方
• both：清除左右浮動，該元素必須出如今前面全部浮動盒子的下方