overflow是個非常神奇的屬性,表面上它只是用來處理超出部分隱藏的元素,實質上它有許多神奇的妙用!
1.overflow的基本屬性
visible 超出部分可見(默認)
hidden 超出部分隱藏
scroll 出現滾動條,不管是否超出
auto 超出方向出現滾動條
inherit 繼承(不常用)
注意注意: 當overflow-x,overflow-y值不相等，并且其中一個為visible，另一個為除visible之外的屬性值(hidden,scroll,auto)，那么其中為visible的屬性值會變為auto。
2.去除瀏覽器滾動條
html{
overflow:hidden;
}
這樣就可以去除瀏覽器的滾動條,在普通瀏覽器上的html的overflow屬性默認是auto,在ie7瀏覽器上的overflow的默認屬性是scroll
3.清楚浮動的影響
overflow屬性還可以清除浮動的影響,只要設置overflow的為auto,scroll,hidden都可以清楚浮動的影響,防止盒子塌陷的問題
4.兩欄自適應布局
實現兩欄自適應布局非常簡單的辦法就是自適應的盒子添加一個overflow:hidden就可以完美實現
利用overflow實現兩欄自適應布局的又稱BFC布局
如果要在兩個盒子間添加間距,最好在第一個浮動的盒子上添加一個右外邊距
當然了,運用overfllow屬性會導致超出部分不可見.所以,還有一種終極寫法
右邊的盒子有種寫法
.boxR{ display: table-cell; width: 2000px; }
5.overflow的隱藏屬性和滾動屬性失效問題
當容器內元素設置絕對定位的時候回導致,overflow的隱藏和滾動效果時失效
這是因為img是相對于body定位的,body是它的包含塊,body是div的父子集,所以導致overflow的效果失效
解決辦法
1.給div加個relative讓img相對于div絕對定位
2把img的包含塊改為div的子集元素
3給div子元素設置任意transform屬性(了解)
6.overflow 和 resize一起使用可以達到任意拉伸元素的效果
7text-overflow: ellipsis;overflow: hidden;一起用可以達到超出的文本用省略號表示
8錨點和overflow制作選項卡妙用
錨點定位的本質:”改變容器滾動的高度”;
