浮動(dòng)和標(biāo)準(zhǔn)流的父盒子搭配
因?yàn)楦讣?jí)盒子很多情況下，不方便給高度，但是子盒子浮動(dòng)就不占有位置，最后父級(jí)盒子高度為0嚣崭，就影響了下面的標(biāo)準(zhǔn)流盒子。
(1).額外標(biāo)簽法(隔墻法)
是W3C推薦的做法是通過在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如 <div style=”clear:both”></div>懦傍，或則其他標(biāo)簽br等亦可有鹿。
- 優(yōu)點(diǎn)： 通俗易懂，書寫方便
- 缺點(diǎn)： 添加許多無意義的標(biāo)簽谎脯，結(jié)構(gòu)化較差。
(2).父級(jí)添加overflow屬性方法
可以給父級(jí)添加： overflow為 hidden| auto| scroll 都可以實(shí)現(xiàn)持寄。
優(yōu)點(diǎn)： 代碼簡潔
缺點(diǎn)： 內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉源梭，無法顯示需要溢出的元素。
(3).使用after偽元素清除浮動(dòng)
:after 方式為空元素額外標(biāo)簽法的升級(jí)版稍味，好處是不用單獨(dú)加標(biāo)簽了
使用方法：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6废麻、7 專有 */
- 優(yōu)點(diǎn)： 符合閉合浮動(dòng)思想 結(jié)構(gòu)語義化正確
- 缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout模庐。
- 代表網(wǎng)站： 百度烛愧、淘寶網(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)： 代碼更簡潔
- 缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout怜姿。
- 代表網(wǎng)站： 小米慎冤、騰訊等
