浮動：使元素脫離文檔流，按照指定方向（左右）發(fā)生移動梳侨，遇到父邊界或者相鄰的浮動元素停下來蛉威，脫離文檔流。
文檔流：是文檔中可顯示對象在排列時所占用的位置/空間(在頁面中占位置)走哺。
脫離文檔流：在頁面中不占位置 蚯嫌，CSS 中通過 float 屬性實現(xiàn)元素的浮動。
1. 浮動
float
值：left(左浮動) right(右浮動) none(不浮動)
.f-l{
float: left;
}
.f-r{
float: right;
}
2. 浮動特性
-
排列規(guī)則：
- 第一個浮動元素遇到父級邊緣的時候停止浮動。
- 其它元素在遇見相鄰浮動元素的時候停止择示。
- 當父元素寬度不夠時束凑，浮動元素換行顯示。但是栅盲，在換行的過程中有元素高度比換行前相鄰元素高的時候汪诉，元素就會被“卡”住。
-
寬高特性：
- 無論什么類型的元素谈秫，只要浮動就支持設(shè)置寬高扒寄，但是當未設(shè)置寬高時由內(nèi)容撐開。
- 支持margin拟烫，但不支持 margin:auto该编。
-
層級特性：
- 浮動元素之后未浮動元素會在浮動元素的下方顯示，但是浮動元素之前的未浮動元素不會被影響硕淑，因為浮動元素只能對后面的元素產(chǎn)生影響课竣。
- 文字不會出現(xiàn)在浮動的元素的下方而是圍繞浮動元素顯示。
-
浮動元素與行塊級元素的對比：
- 共同點：
- 橫排顯示置媳。
- 支持寬高稠氮，沒有寬高，則內(nèi)容撐開半开。
- 支持margin,padding，不支持margin:auto赃份。
- 不同點：
- 行塊級寂拆，不脫離文檔流。浮動抓韩，脫離文檔流纠永。
- 行塊級，解析空格谒拴。浮動不解析空格尝江。
- 共同點：
3. 清除浮動
浮動造成父級元素坍塌，最好的解決方法：偽類
.clearfix:after{
content: '';
display: block;
clear: both;
}
