怎么產(chǎn)生的浮動(dòng)
當(dāng)一個(gè)div中的子元素設(shè)置了float時(shí)纽谒，這個(gè)div的高度沒有隨著內(nèi)容的增加而改變高度
錯(cuò)誤效果
f6d8a17b5eb7ee4c41ee52be3a6e02fa.png
正確效果
4356b59b1d5cbf166e4f6456ea8b89b1.png
解決方案
方法1
在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如 <div style=”clear:both”></div>其他標(biāo)簽br等亦可
<div class="warp" id="float">
<h2>1）添加額外標(biāo)簽</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
優(yōu)點(diǎn)：通俗易懂，容易掌握
缺點(diǎn)：可以想象通過此方法，會(huì)添加多少無意義的空標(biāo)簽，有違結(jié)構(gòu)與表現(xiàn)的分離。
方法2
通過設(shè)置父元素overflow值設(shè)置為hidden绸硕；在IE6中還需要觸發(fā) hasLayout ，例如 zoom：1魂毁；
<div class="warp" id="float" style="overflow:hidden; *zoom:1;">
<h2>2)父元素設(shè)置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題玻佩，代碼量極少
缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素席楚；
方法3(推薦方法)
需要注意的是 :after是偽元素咬崔，不是偽類（某些CSS手冊(cè)里面稱之為“偽對(duì)象”），很多閉合浮動(dòng)大全之類的文章都稱之為偽類烦秩，不過csser要嚴(yán)謹(jǐn)一點(diǎn)垮斯，這是一種態(tài)度。由于IE6-7不支持:after只祠，使用 zoom:1觸發(fā) hasLayout兜蠕。
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { _zoom:1; }
優(yōu)點(diǎn)：結(jié)構(gòu)和語義化完全正確,代碼量居中
缺點(diǎn)：復(fù)用方式不當(dāng)會(huì)造成代碼量增加
