為什么清除浮動(dòng)俊卤？
- 父級(jí)沒(méi)高度
- 子盒子浮動(dòng)了
- 影響下面布局了浸赫，我們就應(yīng)該清除浮動(dòng)了。
1. 額外標(biāo)簽法（隔墻法）
優(yōu)點(diǎn)：通俗易懂元旬，書寫方便榴徐。
缺點(diǎn)：添加許多無(wú)意義的標(biāo)簽，結(jié)構(gòu)比較差
另外要求這個(gè)新的標(biāo)簽必須是塊級(jí)元素匀归。
最后一個(gè)標(biāo)簽后面添加標(biāo)簽
<div style="clear:both;">
</div>
2. 父級(jí)overflow：hidden坑资；
優(yōu)點(diǎn)：書寫簡(jiǎn)單
缺點(diǎn)：溢出隱藏
3. :after 方式是額外標(biāo)簽法的升級(jí)版，也是給父元素添加朋譬。
.clearfix:after {
content: " ";
display: block;
height: 0;
font-size: 0;
visibility: hidden;
clear: both;
}
.clearfix {/* IE6,7專有 */ 由于這個(gè)版本不支持：after 會(huì)有兼容性問(wèn)題
*zoom: 1;
}
.clearfix {
*zoom:1;
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
}
優(yōu)點(diǎn)：沒(méi)有增加標(biāo)簽盐茎，結(jié)構(gòu)更簡(jiǎn)單
缺點(diǎn)：照顧低版本瀏覽器
代表網(wǎng)站：百度 淘寶 網(wǎng)易等
4. 雙偽元素清除浮動(dòng)兴垦，也是給父元素添加
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優(yōu)點(diǎn)：代碼更簡(jiǎn)潔
缺點(diǎn)：照顧低版本瀏覽器
點(diǎn)贊加關(guān)注徙赢，永遠(yuǎn)不迷路
