? ? ? ?浮動(dòng)袜爪，前端開(kāi)發(fā)人員進(jìn)行css布局的必備神器，但使用浮動(dòng)會(huì)使元素脫離正常文檔流穗慕，給我們?cè)斐梢恍┎幌胍男Ч藭r(shí)就需要用到“清除浮動(dòng)”這項(xiàng)技能了妻导。一般來(lái)說(shuō)逛绵，清除浮動(dòng)大家首先想到的使用“overflow:hidden”這個(gè)方法，這個(gè)方法清浮動(dòng)最大的弊端在于“隱藏超出父元素的內(nèi)容部分”倔韭，且應(yīng)用于浮動(dòng)元素的父元素术浪，如果要清除浮動(dòng)元素對(duì)后面元素的影響，此方法是行不通的寿酌。示例：
?.box {
? ? ?overflow: hidden;
? ? ?border: 4px solid blue;
}
.div1 {
? ? float: left;
? ? width: 200px;
? ?height: 200px;
? ?background: hotpink;
}
.div2 {
? ?width: 300px;
? ?height: 300px;
? ?background: green;
}
? ? ? ?接著一個(gè)常見(jiàn)的方法是 clear:both,此方法我覺(jué)得和overflow:hidden這個(gè)方法是互補(bǔ)的胰苏，它應(yīng)用于浮動(dòng)元素后面的元素，清除浮動(dòng)元素對(duì)后面元素的影響醇疼，當(dāng)然同時(shí)硕并，也清除了對(duì)父元素的影響法焰。示例，
?.box {
? ? border: 4px solid blue;
}
?.div1 {
? ? float: left;
? ? width: 200px;
? ? height: 200px;
? ? background: hotpink;
}
.div2 {
? ? clear: both;
? ? width: 300px; ? ?
? ? height: 300px;
? ? background: green;
}
? ? ? ? 但是這個(gè)方法的缺點(diǎn)也很明顯倔毙，如果單單是用來(lái)給父元素來(lái)清除浮動(dòng)埃仪，就會(huì)額外的添加一個(gè)標(biāo)簽，從而破壞了代碼的語(yǔ)義陕赃。這里還有一些注意的是卵蛉，添加的這個(gè)元素不能有浮動(dòng)屬性，且是一個(gè)塊元素或table元素么库，不然是無(wú)法給父元素清浮動(dòng)的傻丝，有興趣的童鞋，可以嘗嘗修改一下代碼诉儒，這里就不做演示葡缰。
? ? ? ?介紹完前面的兩種方法之后，重點(diǎn)是第三種方法允睹，現(xiàn)在各大網(wǎng)站运准，最常用的清除浮動(dòng)方法。通過(guò)偽元素的使用缭受，來(lái)清除浮動(dòng)對(duì)父元素的影響胁澳。
.clearfix {
? ? *zoom: 1;
}
.clearfix:before,.clearfix:after {
? ? ?content: '';
? ? ?display: block;
}
.clearfix:after {
? ? ? clear: both;
}
? ? ? 這個(gè)方法通過(guò)給元素加class名的方法，來(lái)靈活的清除浮動(dòng)對(duì)父元素影響米者，和第二種方法最大的不同在于韭畸，給標(biāo)簽加“clear: both”屬性的元素，是通過(guò)偽元素來(lái)“虛擬”出的一個(gè)空元素蔓搞，所以并不破壞語(yǔ)義結(jié)構(gòu)胰丁，并且通過(guò)zoom來(lái)兼容IE6、IE7瀏覽器喂分。
