overflow屬性可以設(shè)置的值有5種：
（1）visible 默認(rèn)值，內(nèi)容不會(huì)裁剪，呈現(xiàn)在元素框之外；
（2）hidden 內(nèi)容會(huì)被裁剪，并且子元素內(nèi)容是不可見(jiàn)的；
（3）scroll 內(nèi)容會(huì)被裁剪，但溢出的內(nèi)容可以拖動(dòng)瀏覽器自帶的滾動(dòng)條，查看內(nèi)容；
（4）auto 如果內(nèi)容被裁剪，那么溢出的內(nèi)容也是拖動(dòng)移動(dòng)瀏覽器自帶的滾動(dòng)條，查看內(nèi)容；
（5）inherit 繼承父元素的overflow屬性的值。
在實(shí)際運(yùn)用中，除了hidden的應(yīng)用比較多而靈活，其他幾個(gè)還是很好理解和運(yùn)用的。所以，這里著重歸納了hidden的用法。
（1）清除浮動(dòng)
<div class="wrap"> <p>test of css</p> </div>
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {float: left;}
（2）阻止邊距外折疊
<div class="wrap"> <p>test of css</p> </div>
body,p {padding: 0;margin: 0;}
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {margin-top: 20px;}
（3）在IE-6，解決定義1px高的塊元素
<div class="line"></div>
.line {height: 1px;overflow: hidden;}
（4）創(chuàng)建兩欄布局
<div class="left"></div> <div class="right"></div>
div {height: 500px;}
.left {float: left;background-color: #000;width: 200px;margin-right: 5px;}
.right {overflow: hidden;zoom:1;background-color: #ccc;}
以上這4種還是比較常用的。但是在做項(xiàng)目的時(shí)候，發(fā)現(xiàn)了一個(gè)問(wèn)題：父元素是必須overflow:hidden的，大多數(shù)情況下，
其子元素是內(nèi)容超出會(huì)被截掉。
顯然，這是一個(gè)bug。其解決方案：
將需要overflow:hidden和父元素的高度保持一致，不可以出現(xiàn)padding/margin邊距值。
此外，有2種情況設(shè)置overflow:hidden時(shí)，內(nèi)容是不會(huì)被裁剪：
1.有overflow:hidden樣式的塊元素不具有position:relative和position:absolute樣式;
2.內(nèi)部溢出的元素是通過(guò)position:absolute絕對(duì)定位
【 微信掃一掃 】
