浮動(dòng)溢出
在非IE瀏覽器（如Firefox）下今布，當(dāng)容器的高度（height）為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素锰悼，在這種情況下根时，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象胃珍。這個(gè)現(xiàn)象叫浮動(dòng)溢出栅屏，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動(dòng)堂鲜。
解決方法
html:
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
css:
.parent{
margin: 0 auto;
width: 500px;
border: 2px solid red;
padding: 10px;
}
.parent:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.child1{
float: left;
height: 300px;
width: 200px;
background: #666666;
border: 1px solid blue;
}
.child2{
height: 100px;
margin-left: 210px;
background: pink;
border: 1px solid yellow;
}
- 方法一：
在html的child2后添加<div class="clear"></div>栈雳，css為.clear{clear:both;}
優(yōu)點(diǎn)：簡(jiǎn)單，代碼少缔莲，瀏覽器支持好
缺點(diǎn)：如果頁(yè)面浮動(dòng)布局多哥纫，則需要很多空標(biāo)簽 - 方法二：
在parent中添加overflow:auto;
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題，代碼量極少
缺點(diǎn)：多個(gè)嵌套后痴奏，firefox某些情況會(huì)造成內(nèi)容全選蛀骇；IE中 mouseover 造成寬度改變時(shí)會(huì)出現(xiàn)最外層模塊有滾動(dòng)條等，firefox早期版本會(huì)無(wú)故產(chǎn)生focus等 - 方法三:
在parent容器添加一個(gè)：after偽元素读拆，并使用content："." 或者為" "在元素的后面生成了內(nèi)容為一個(gè)點(diǎn)的塊級(jí)元素擅憔，并使用一切方法使這個(gè)塊級(jí)元素隱藏并清除浮動(dòng)clear:both.
.parent:after{
content: ".";/生成一個(gè)元素內(nèi)容為"."，為" "時(shí)也好用/
display: block;/讓元素為塊級(jí)元素/
height: 0;/用以下兩種方式讓元素不渲染/
visibility: hidden;
clear: both;/清除浮動(dòng)/
}
優(yōu)點(diǎn)：瀏覽器支持好檐晕，不容易出現(xiàn)怪問(wèn)題（目前：大型網(wǎng)站都有使用暑诸，如：騰迅蚌讼，網(wǎng)易，新浪等等） - 方法四:
讓parent容器也浮動(dòng)个榕，只需給parent容器添加 float：left篡石，也可閉合浮動(dòng)。
優(yōu)點(diǎn)：代碼少
缺點(diǎn)：會(huì)導(dǎo)致整個(gè)頁(yè)面大部分都處于浮動(dòng)狀態(tài)西采，容易出現(xiàn)問(wèn)題
