在CSS排版中，如果一個(gè)層中的層使用了float浮動(dòng)的話斑芜，那么就有可能會(huì)出現(xiàn)外層沒(méi)有被內(nèi)層撐開(kāi)的情況杏头，如以下代碼所示：
<div style="width:300px; background-color:Red;">
測(cè)試
<div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">左邊</div>
</div>
如果要解決這個(gè)問(wèn)題沸呐，可以在外層的CSS中加上“overflow:auto”。
在CSS中overflow屬于用來(lái)說(shuō)明當(dāng)內(nèi)容溢出元素框時(shí)要怎么處理崭添，從上圖中可以看出，內(nèi)層已經(jīng)溢出了外層棘伴，所以需要使用overflow屬性來(lái)指如何顯示內(nèi)層中屁置。overflow屬性的默認(rèn)值是visible，也就是不管它是怎么溢出的阱穗，溢出的內(nèi)容不裁剪，任其顯示在元素框外面揪阶。
除了visible值之后患朱，overflow屬性還有以下幾個(gè)值：
- hidden：內(nèi)容會(huì)被裁剪，溢出的部分看不到。
- scroll：使用滾動(dòng)條來(lái)查看溢出的部分劝评，始終顯示滾動(dòng)條倦淀。
- auto：如果內(nèi)容需要裁剪，則等于scroll撞叽，顯示滾動(dòng)條；否則不顯示滾動(dòng)條科展。
- inherit：從父元素中繼承overflow屬性值糠雨。不過(guò)以前的IE版本都不支持該屬性值，包括IE8琅攘，IE9還沒(méi)試過(guò)松邪。
由于本例中，外層的CSS沒(méi)有指定overflow屬性逗抑，所以默認(rèn)為visible，也就是不管它怎么個(gè)溢出法荧关，所以褂傀，只要將外層的CSS中加上overflow:auto，如以下代碼所示：
<div style="width:300px; background-color:Red; overflow:auto;">
外層
<div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">內(nèi)層</div>
</div>
也許有人會(huì)說(shuō)紊服，為什么設(shè)置overflow:auto之后，外層就包含了內(nèi)層参萄，而不是將溢出的那部分使用滾動(dòng)條顯示出來(lái)呢煎饼？這是因?yàn)闆](méi)有指定外層的高度，所以它就自適應(yīng)了。如果指定了外層的高度筒溃，而內(nèi)層的高度又大于外層的高度，那么就會(huì)顯示滾動(dòng)條了浑测。如以下代碼所示歪玲。
<div style="width:300px; background-color:Red; overflow:auto; height:80px;">
外層
<div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">內(nèi)層</div>
</div>
