深入理解CSS溢位overflow

overflow溢位

值: visible | hidden | scroll | auto | inherit

初始值: visible

應用於: 塊級元素、替換元素、表單元格

繼承性: 無

[注意]除了ie7-瀏覽器外，其他瀏覽器都不支援給table-cell元素設定overflow屬性。firefox和ie11瀏覽器不支援給table-cell元素的設定100%高度的子元素設定overflow屬性

overflow-x | overflow-y

overflow-x和overflow-y的屬性原本是ie瀏覽器獨自拓展的屬性，後來被css3採用，並標準化。overflow-x主要用來定義對水平方向內容溢位的剪下，而overflow-y主要用來定義對垂直方向內容溢位的剪下

[注意]如果overflow-x和overflow-y值相同則等同於overflow。如果overflow-x和overflow-y值不同，且其中乙個值顯式設定為visible或未設定預設為visible，而另外乙個值是非visible的值。則visible值會被重置為auto

初始值: visible

應用於: 塊級元素、替換元素、表單元格

繼承性: 無

visible

元素的內容在元素框之外也可見

[注意1]ie6-瀏覽器中元素的包含塊會延伸，使得可以包裹其超出的內容

box6

.in

123

左圖為ie6-瀏覽器，右圖為其他瀏覽器

[注意2]ie7-瀏覽器的按鈕(包括和兩種)存在bug，當按鈕上的文字越多時，按鈕兩側的padding就越大。通過設定overflow:visible就可解決該問題

左圖為預設情況，右圖為設定overflow後的情況

auto

如果內容被剪裁，則瀏覽器會顯示滾動條以便檢視其餘的內容

[注意]對於一般瀏覽器來說，和預設帶有overflow:auto的屬性。但ie7-瀏覽器則不同，預設存在縱向滾動條

//ie7-瀏覽器

2html

3//其他瀏覽器

4html

5//去除頁面預設滾動條

6html

scroll元素的內容會在元素框的邊界處剪裁，但瀏覽器會顯示滾動條以便檢視其餘的內容

[注意]firefox和ie8+瀏覽器在overflow:scroll或auto時，存在padding-bottom缺失現象

.box

8.in

123

view code

左圖為chrome瀏覽器的情況，右圖為firefox瀏覽器的情況

元素的內容會在元素框的邊界處剪裁，並且超出剪裁區域的內容不可見

no-display

當內容溢位容器時不顯示元素，類似於元素新增了display:none屬性一樣

no-content

當內容溢位視窗時不顯示內容，類似於元素新增了visibility: hidden屬性一樣

[注意]no-display和no-content這兩個屬性目前沒有瀏覽器支援

【解決辦法】

overflow元素自身為包含塊

給父級設定position:absolute或fixed或relative

overflow元素的子元素為包含塊

在絕對定位元素和overflow元素之間增加乙個元素並設定position:absolute或fixed或relative

123

絕對定位元素45

當overflow設定為auto或scroll或hidden時可以觸發bfc，使得overflow可以實現一些相關應用。關於bfc的詳細資訊移步至此

清除浮動影響

[注意]ie6-瀏覽器使用overflow這種方式並不能清除浮動，常用的消除浮動的方法是

.clear

4.clear:after

避免margin穿透

[注意]使用overflow屬性只是避免margin穿透的很多方法中的乙個，其他的方法還有bfc化、設定padding、設定border等

兩欄自適應布局

[注意]使用overflow屬性的場景限制比較明顯，常用的兩欄自適應布局的方法:

.cell

選項卡

128

91102

113124

1314

bodyula.show.show-in#one#two#three#four.con.con-in

深入理解CSS溢位overflow

深入理解CSS背景

深入理解CSS浮動

深入理解CSS背景

深入理解CSS溢位overflow

深入理解CSS背景

深入理解CSS浮動

深入理解CSS背景

相關推薦