在HTML+CSS布局中，浮動（float） 是一種經典的布局技術，用于控制元素在頁面中的排列方式。它最初設計用于實現文字環繞圖片的效果，后來被廣泛用于復雜布局，但隨著Flexbox和Grid的興起，其使用場景有所減少，但仍是前端基礎中需要掌握的重要概念。
一、浮動的基本概念
浮動的本質：讓元素脫離正常的文檔流（Normal Flow），并向左或向右移動，直到碰到父元素的邊緣或其他浮動元素。
- 正常文檔流：元素默認按照從上到下、從左到右的順序排列（塊級元素獨占一行，行內元素并排）。
- 浮動后：元素會"漂浮"起來，不再占據原來在文檔流中的位置，導致后續元素可能向上移動并環繞它。
二、浮動的語法
通過float屬性設置浮動，可選值如下：
selector {float: none; /* 默認值，不浮動 */float: left; /* 向左浮動 */float: right; /* 向右浮動 */
}
示例：文字環繞圖片
<div class="container"><img src="example.jpg" style="float: left; margin-right: 10px;" width="200"><p>這是一段文字，會環繞在圖片右側...（文字內容足夠長時，會在圖片下方繼續排列）</p>
</div>效果：圖片向左浮動，文字會自動環繞在圖片右側和下方。
三、浮動的特性
- 脫離文檔流，但不脫離文本流
- 浮動元素不再占據文檔流的位置，后續非浮動元素會填補其空間。
- 但文本（或行內元素）會環繞浮動元素，不會被其覆蓋（這是浮動設計的初衷）。
- 具有“塊級”特性
- 行內元素浮動后，會自動具備塊級元素的特性（可設置寬高、margin/padding等），例如：
span {float: left;width: 100px; /* 行內元素默認無法設置寬高，浮動后可生效 */height: 50px;
}
- 浮動元素會“收縮”
- 塊級元素浮動后，如果未設置寬度，會根據內容自動收縮（默認塊級元素寬度為父元素100%）。
- 多個浮動元素會并排排列
- 同一方向的浮動元素（如多個
float: left）會在一行內依次排列，超出父元素寬度時會自動換行。
- 同一方向的浮動元素（如多個
四、浮動的問題：父元素高度坍塌
浮動元素脫離文檔流后，父元素無法感知其高度，導致父元素高度為0（即“高度坍塌”），可能破壞頁面布局。
示例：高度坍塌現象
<div class="parent" style="border: 2px solid red;"><div class="child" style="float: left; width: 100px; height: 100px; background: blue;"></div>
</div>- 父元素（紅色邊框）因子元素浮動，高度為0，邊框會“塌陷”成一條線。
五、清除浮動（解決高度坍塌）
清除浮動的核心是讓父元素重新感知浮動元素的高度，常用方法如下：
1. 額外標簽法（隔墻法）
在浮動元素的最后添加一個空的塊級元素，設置clear: both：
<div class="parent"><div class="child" style="float: left;"></div><!-- 額外標簽 --><div style="clear: both;"></div>
</div>clear: both表示該元素左右兩側不允許有浮動元素，迫使父元素撐開高度。- 缺點：增加無意義的標簽，不符合語義化。
2. 父元素設置overflow
給父元素添加overflow: hidden或auto，觸發“BFC（塊級格式化上下文）”，使父元素包含浮動元素：
.parent {overflow: hidden; /* 或 overflow: auto */
}
- 優點：簡單快捷，無需額外標簽。
- 缺點：可能隱藏超出父元素的內容（如子元素的margin或陰影）。
3. 偽元素清除法（推薦）
通過父元素的::after偽元素模擬額外標簽，是目前最常用的方法：
.parent::after {content: ""; /* 偽元素必須設置content */display: block; /* 轉為塊級元素 */clear: both; /* 清除浮動 */visibility: hidden; /* 隱藏偽元素（不影響布局） */height: 0; /* 高度為0，不占用空間 */
}
.parent {*zoom: 1; /* 兼容IE6/7（IE低版本不支持偽元素） */
}
- 優點：語義化好，不添加額外標簽，兼容性強。
六、浮動的應用場景
- 文字環繞圖片：最經典的原生場景。
- 橫向排列元素：如導航欄、圖片畫廊等（多個元素浮動實現并排）。
- 兩欄/三欄布局：早期沒有Flexbox/Grid時，常用浮動實現左右分欄。
示例：簡單兩欄布局
<div class="container"><div class="left" style="float: left; width: 30%; background: #f0f0f0;">左側欄</div><div class="right" style="float: right; width: 70%; background: #e0e0e0;">右側欄</div><div style="clear: both;"></div> <!-- 清除浮動，避免影響后續元素 -->
</div>七、浮動的注意事項
- 謹慎嵌套浮動：多層浮動可能導致復雜的布局問題，難以調試。
- 及時清除浮動：只要父元素包含浮動子元素，就需要清除浮動，避免高度坍塌。
- 現代布局替代方案：對于復雜布局，優先使用Flexbox（一維）或Grid（二維），它們更簡潔、易維護，且避免了浮動的副作用。
