## 浮動
- 使用float設置元素浮動
- 可選值
- none 默認值. 元素不浮動
- left 元素向左浮動
- right 元素向右浮動
- 浮動的特點:
- 當元素設置浮動後,元素會向頁面左上或右上浮動
- 當浮動元素遇到父元素邊框後, 會停止浮動
- 當浮動元素遇到其他浮動元素時,會停止浮動
- 如果浮動元素上是一個沒有浮動的塊元素,浮動元素不會超過它
- 浮動元素不會超過它上邊浮動的兄弟元素
- 浮動元素不會覆蓋文字. 文字會環繞在浮動元素周圍
- **浮動元素會完全脫離文檔流**
- 元素脫離文檔流後的特點:
- 內聯元素: 會變成塊元素.獨占一行並且可設置寬高
- 塊元素: 不再獨占一行並且寬和高都會被內容撐開
- clear 清除浮動
- left 在左側不允許浮動元素
- right 在右側不允許浮動元素
- both 左右兩側均不允許浮動元素


## 高度塌陷
- 默認情況下父元素的高度被子元素撐開. 如果子元素開啟浮動脫離文檔流則無法撐起元素高度.導致高度塌陷
- 解決方式
- 開啟父元素的BFC
- 為父元素添加after偽元素
- 添加content:""
- 設置偽元素 display:block
- 清除浮動 clear:both
- BFC開啟後的特性
- 元素不會被浮動元素覆蓋
- 子元素的垂直外邊距不會傳遞給父元素
- **元素可以包含浮動的子元素**
- 開啟BFC方式
1. 設置元素浮動
2. 設置元素的dispaly:inlineblock
3. 設置元素的絕對定位
4. **設置元素的overflow:hidden**

浮動 高度塌陷