3.4清除浮動(dòng)總結(jié)
為什么需要清除浮動(dòng)？
1、父級(jí)沒有高度
2、子盒子浮動(dòng)了
3、影響下面布局了
| 清除浮動(dòng)的方式 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|
| 額外標(biāo)簽法(隔墻法) | 通俗易懂，書寫方便 | 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差 |
| 父級(jí)overflow:hidden; | 書寫簡(jiǎn)單 | 溢出隱藏 |
| 父級(jí)after偽元素 | 結(jié)構(gòu)語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
| 父級(jí)雙偽元素 | 結(jié)構(gòu)語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
- 隔墻法
在最后一個(gè)浮動(dòng)后面添加盒子并添加clear: both; - 父級(jí)overflow:hidden;
給浮動(dòng)元素的父盒子添加overflow:hidden - 父級(jí)after偽元素
添加css代碼并給父級(jí)添加class名clearfix
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /*IE6,7專用*/
*zoom: 1;
}
- 父級(jí)雙偽元素
添加css代碼并給父級(jí)添加class名clearfix
.clearfix::before, .clearfix::after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix { /*IE6,7專用*/
*zoom: 1;
}
