定義
一個(gè)浮動(dòng)盒會(huì)向左或右移動(dòng)蝗肪，直到其外邊（outer edge）挨到包含塊級(jí)沿或者另一個(gè)浮動(dòng)盒的外邊袜爪。如果存在行盒，浮動(dòng)盒的外top(邊)會(huì)與當(dāng)前行盒的top（邊）對(duì)齊 如果沒(méi)有足夠的水平空間來(lái)浮動(dòng)薛闪，它會(huì)向下浮動(dòng)辛馆，直到空間適合或者不會(huì)再出現(xiàn)其他浮動(dòng)了
因?yàn)楦?dòng)（盒）不在普通流內(nèi)，在浮動(dòng)盒之前或者之后創(chuàng)建的未定位的（non-positioned)塊盒會(huì)豎直排列，就像浮動(dòng)不存在一樣昙篙。然而腊状，接著（next to)浮動(dòng)（盒）創(chuàng)建的當(dāng)前及后續(xù)行盒會(huì)進(jìn)行必要的縮短，為了給浮動(dòng)（盒）的margin box讓出空間苔可。
脫離普通流
普通流是什么缴挖？
代碼
浮動(dòng)元素意義上不是真正的脫離文檔流，和absolute不一樣焚辅。
兩個(gè)特性：
- 塊級(jí)元素設(shè)置浮動(dòng)寬度可以收縮
- 行內(nèi)元素設(shè)置浮動(dòng)映屋，擁有塊級(jí)的特性，可以設(shè)置margin,padding.
浮動(dòng)的使用場(chǎng)景
兩欄布局
左側(cè)固定寬度同蜻，右側(cè)自適應(yīng)
代碼
右側(cè)固定寬度腋腮，左側(cè)自適應(yīng)
代碼-
三欄布局
兩側(cè)寬度固定，中間自適應(yīng)寬度
image.png
注意：順序問(wèn)題
通過(guò)浮動(dòng)實(shí)現(xiàn)導(dǎo)航條
1.左浮動(dòng)導(dǎo)航條
代碼
2.右浮動(dòng)導(dǎo)航條
代碼
浮動(dòng)的副作用：
總結(jié)：如果一個(gè)元素里只有浮動(dòng)元素侮穿，那它的高度會(huì)是0债查。如果你想要它自適應(yīng)即包含所有浮動(dòng)元素，那你需要清除它的子元素卵蛉。一種方法叫做clearfix 颁股，即
clear一個(gè)不浮動(dòng)的::after偽元素。
#container::after {
content: "";
display: block;
clear: both;
}
清除浮動(dòng)
clear既可以用于浮動(dòng)又可以用于非浮動(dòng)
當(dāng)應(yīng)用于非浮動(dòng)塊時(shí)傻丝，它將非浮動(dòng)塊的邊框邊界移動(dòng)到所有相關(guān)浮動(dòng)元素外邊界的下方甘有，這個(gè)非浮動(dòng)塊的垂直外邊距會(huì)折疊。
當(dāng)應(yīng)用于浮動(dòng)元素時(shí)葡缰，它將元素的外邊界移動(dòng)到所有相關(guān)的浮動(dòng)元素外邊框邊界的下方亏掀。
這會(huì)影響后面浮動(dòng)元素的布局，后面的浮動(dòng)元素的位置無(wú)法高于它之前的元素泛释。（參考mdn)
clear:left;要求該盒的top border邊位于源文檔在此之前的元素形成的所有左浮動(dòng)盒的bottom外邊下方
代碼clear:right;要求該盒的top border邊位于源文檔中在此之前的元素形成的所有右浮動(dòng)盒的bottom外邊下方
代碼
浮動(dòng)和負(fù)邊距
兩個(gè)浮動(dòng)元素滤愕，如果因放不下導(dǎo)致其中一個(gè)下移，對(duì)下移的元素設(shè)置負(fù)margin值大于自身的寬度可以其上移怜校。
代碼
