元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)
? ? ? ? 1、脫離標(biāo)準(zhǔn)普通流的控制
? ? ? ? 2蚯涮、移動(dòng)到指定位置细溅。
在做一些網(wǎng)頁布局的時(shí)候標(biāo)準(zhǔn)流已經(jīng)不滿足我們的需要了，因此會(huì)借助浮動(dòng)來完成頁面布局。比如當(dāng)需要多個(gè)塊級(jí)元素在一行顯示的時(shí)候宋雏，而display不能滿足需求的時(shí)候：
或者這樣
?第一種情況用display實(shí)現(xiàn)的時(shí)候會(huì)發(fā)現(xiàn)每個(gè)盒子中間有空隙芜飘，第二種display根本實(shí)現(xiàn)不了，而浮動(dòng)能很好地解決這種問題磨总。
浮動(dòng)的語法：
選擇器 {
? ? ? ? float： 屬性值嗦明；
}
float屬性值：none（默認(rèn)）、left（左浮動(dòng)）蚪燕、right（右浮動(dòng)）
浮動(dòng)的口訣：浮 ? ? 漏 ? ?特
溉⑴啤：設(shè)置了浮動(dòng)的元素漂浮在標(biāo)準(zhǔn)流上面
漏：浮動(dòng)的盒子把自己的位置讓給了下面的盒子，不占原來的位置馆纳，脫離了標(biāo)準(zhǔn)流诗良，俗稱“脫標(biāo)”
```html
.box1 {
? ? width: 200px;
? ? height: 200px;
? ? background-color: rgba(255, 0, 0, 0.5);
? ? float: left;
}
.box2 {
? ? width: 150px;
? ? height: 300px;
? ? background-color: skyblue;
}
```
特：float屬性會(huì)改變?cè)氐膁isplay屬性，類似轉(zhuǎn)換為行內(nèi)塊鲁驶，但是盒子之間沒有縫隙鉴裹。
div {
? ? width: 200px;
? ? height: 200px;
? ? background-color: pink;
? ? /* 轉(zhuǎn)換為行內(nèi)塊元素，可以水平顯示钥弯，不過 div 之間有間隙径荔，不方便處理 */
? ? /* display: inline-block; */
? ? /* 設(shè)置浮動(dòng)屬性，可以讓 div 水平排列脆霎，并且沒有間隙 */
? ? float: left;
}
.two {
? ? background-color: hotpink;
}
注意：多個(gè)塊級(jí)元素用浮動(dòng)放在一起猖凛，如果父級(jí)元素裝不下會(huì)自動(dòng)換行
float的擴(kuò)展：
1、浮動(dòng)元素與父盒子的關(guān)系
????????????自盒子的浮動(dòng)參照父盒子對(duì)齊
? ? ? ? ? ? 不會(huì)與父盒子的邊框重疊绪穆，也不會(huì)超過父盒子的內(nèi)邊距
2辨泳、浮動(dòng)元素與兄弟盒子的關(guān)系
? ? ? ? ?在父級(jí)元素中，如果前一個(gè)盒子是
? ? ? ? ? ? ? ? 浮動(dòng)的玖院，那么當(dāng)前盒子與前一個(gè)盒子的頂部對(duì)齊菠红；
? ? ? ? ? ? ? ? ? 普通的，那么當(dāng)前盒子會(huì)顯示在前一個(gè)盒子的下方难菌。
注意：浮動(dòng)只會(huì)影響當(dāng)前的或者是后面的標(biāo)準(zhǔn)流盒子试溯，不會(huì)影響前面的標(biāo)準(zhǔn)流。
清除浮動(dòng)
在父級(jí)盒子很多的情況下郊酒，不方便給高度遇绞，但是子盒子浮動(dòng)不占用位置導(dǎo)致父元素的高度為0，就影響了下面的標(biāo)準(zhǔn)流燎窘，所以會(huì)清除浮動(dòng)摹闽，準(zhǔn)確的說是清除浮動(dòng)造成的影響
清除浮動(dòng)本質(zhì)：
清除浮動(dòng)主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問題。清除浮動(dòng)之后褐健， 父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度付鹿。父級(jí)有了高度，就不會(huì)影響下面的標(biāo)準(zhǔn)流了
什么時(shí)候用清除浮動(dòng)：
1、父級(jí)沒高度
2舵匾、子盒子浮動(dòng)了
3俊抵、影響下面布局了，我們就應(yīng)該清除浮動(dòng)了坐梯。
清除浮動(dòng)的方法：
1徽诲、額外標(biāo)簽法：
是W3C推薦的做法是通過在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如 <div style=”clear:both”></div>，或則其他標(biāo)簽br等亦可吵血。
2馏段、父級(jí)元素加overfloat屬性
overfloat：hidden/auto/scroll
3、用after偽元素清除浮動(dòng)
語法格式如下
.clearfix:after {
? ? ? ? ? ? content: ""; ? 或content: ".";
? ? ? ? ? ? display: block;
? ? ? ? ? ? height: 0;
? ? ? ? ? ? visibility: hidden;
? ? ? ? ? ? clear: both;
}
.clearfix {*zoom: 1;} ? /* ?IE6践瓷、7專有*/
4、用雙偽元素清除浮動(dòng)
.clearfix:befor,
.clearfix:after {
? ? ? ? ? ? content: ""; ? 或 ?content: ".";
? ? ? ? ? ? display: table;
}
.clearfix:after {
? ??????????clear: both;
}
.clearfix {*zoom: 1;} ? /* ?IE6亡蓉、7專有*/
