## **浮動 float**
**一、浮動元素脫標**
脫標元素**不再區分**塊級元素和行內元素。
脫標元素**可以設置**寬高還可以并排顯示。
#### **脫標？？？**
### **脫標？？？**
## **脫標？？？**
# **脫標？？？**
# **~~脫？？？？！！！！！~~**
~~**忒**（tui）~~ 想啥呢？？
來來來，解釋一下哈~
這玩意兒是**脫離標準文檔流**！！
> 標準文檔流，類似于word文檔。光標位置決定書寫位置。元素默認都是在標注文檔流中渲染，元素從上到校順序進行渲染，標準文檔流在頁面最底層。
> 特點：1、文本內容有空白現象；
> 2、文本內容高矮不同、底邊對齊效果不同；
> 3、文本內容超過盒子寬度時自動換行。
想要脫離標準文檔流方式：浮動、絕對定位、固定定位
**二、浮動元素依次貼邊顯示**
舉例：如果一個大盒子之中有四個小盒子，他們是貼邊顯示的。但當所有子盒子的寬度超過父盒子的寬度會自動換行，掉下來。（會想他的前一個兄弟盒子貼邊）
**浮動元素不會鉆盒子：**
**浮動元素沒有margin垂直方向的塌陷：**
兩個浮動元素上下排列，上盒子有一個下margin,下盒子有個上margin，他們之間的和就是兩個margin之和。
**浮動元素會讓出標準流位置：**
兩個同級元素，一個元素浮動，第二個元素設置標準流。浮動元素會讓出標準流的位置，視覺上形成壓蓋的效果。
所以，在使用同級元素的時候，要浮動都浮動。
## **字圍**
浮動元素會讓出標準流位置，文字并不會被壓蓋住，而是現實在浮動元素周圍。
## **浮動雖好，但他也會有很多問題嗷。**
1、浮動元素不能撐高父盒子的高度（高度自適應），
2、并且浮動的元素會影響后面的浮動元素
## **解決辦法：**
1、直接給父盒子添加height
可以解決浮動元素影響后面元素的問題，但沒有解決高度自適應
2、給后面浮動元素父盒子添加clear
```
clear:清除浮動影響
left: 清除左浮動影響
right: 右
both:清除左右浮動影響
```
解決：浮動元素會影響后面浮動元素
沒有解決 高度自適應問題
3、外墻法：
在兩個父盒子之間添加一堵“有高度”，“清除浮動”墻
解決：浮動元素會影響后面元素的浮動，在視覺上會有間隔
沒有解決高度自適應
4、內墻法
在所有浮動元素后面加一堵墻
解決了所有問題，但是會給頁面增加很多無意義標簽
5、overflow
auto:溢出滾動
當內容超過盒子設置的高度，自動出現滾動條，拉動滾動條可以查看所有內容
hidden：溢出隱藏
當暖戳能超過盒子設置的高度，將超過的部分贏藏掉
設置padding 內容不會背影藏，將邊框之外的內容隱藏。
給父盒子設置overflow:hidden，可以解決所有問題
所以：
> overflow:hidden有兩個引申含義：
> 1、強制檢測子盒子高度，將檢測到的高度自動撐高父盒子（高度自適應）
> 2、強制檢測浮動子盒子，不會讓其影響其他浮動元素
但是：如果盒子內容部內容很多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素。
6、使用after偽元素清除浮動
```
元素::after {
content: ''; -------一定要寫
clear: both; -------一定要寫
}
```
偽元素特點：偽元素不屬于文檔； 所以不會多添加dom元素占用節點。
