轉載自：https://www.cnblogs.com/Renyi-Fan/p/9206860.html
深入理解CSS溢出overflow
> 一、總結（點擊顯示或隱藏總結內容）
一句話總結：overflow用於對溢出內容的處理。
1、overflow有哪5個常用參數，分別是什么意思？
visible | hidden | scroll | auto | inherit
visible 元素的內容在元素框之外也可見
auto 如果內容被剪裁，則瀏覽器會顯示滾動條以便查看其余的內容
scroll 元素的內容會在元素框的邊界處剪裁，但瀏覽器會顯示滾動條以便查看其余的內容
hidden 元素的內容會在元素框的邊界處剪裁，並且超出剪裁區域的內容不可見
二、深入理解CSS溢出overflow
前面的話
當一個元素固定為某個特定大小，但內容在元素中放不下。此時就可以利用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 | hidden | scroll | auto | inherit | no-display | no-content
初始值: visible
應用於: 塊級元素、替換元素、表單元格
繼承性: 無
屬性
visible
元素的內容在元素框之外也可見
[注意1]IE6-瀏覽器中元素的包含塊會延伸，使得可以包裹其超出的內容
.box{
height: 200px;
width: 200px;
background-color: lightgreen;
}
.in{
width: 300px;
height: 100px;
background-color: lightblue;
}
<div class="box">
<div class="in"></div>
</div>
左圖為IE6-瀏覽器，右圖為其他瀏覽器
 |
 |
[注意2]IE7-瀏覽器的按鈕(包括<button>和<input type="button">兩種)存在bug，當按鈕上的文字越多時，按鈕兩側的padding就越大。通過設置overflow:visible就可解決該問題
左圖為默認情況，右圖為設置overflow后的情況
 |
 |
auto
如果內容被剪裁，則瀏覽器會顯示滾動條以便查看其余的內容
[注意]對於一般瀏覽器來說，<html>和<textarea>默認帶有overflow:auto的屬性。但IE7-瀏覽器則不同，默認存在縱向滾動條
//IE7-瀏覽器
html{overflow-y: scroll;}
//其他瀏覽器
html{overflow: auto;}
//去除頁面默認滾動條
html{overflow: hidden;}
scroll
元素的內容會在元素框的邊界處剪裁，但瀏覽器會顯示滾動條以便查看其余的內容
[注意]firefox和IE8+瀏覽器在overflow:scroll或auto時，存在padding-bottom缺失現象
.box{
width: 100px;
height: 100px;
padding: 50px;
background-color: pink;
overflow:scroll;
}
.in{
width: 100px;
height: 200px;
background-color: lightgreen;
}
<div class="box">
<div class="in"></div>
</div>
左圖為chrome瀏覽器的情況，右圖為firefox瀏覽器的情況
 |
 |
hidden
元素的內容會在元素框的邊界處剪裁，並且超出剪裁區域的內容不可見
no-display
當內容溢出容器時不顯示元素，類似於元素添加了display:none屬性一樣
no-content
當內容溢出窗口時不顯示內容，類似於元素添加了visibility: hidden屬性一樣
[注意]no-display和no-content這兩個屬性目前沒有瀏覽器支持
失效
絕對定位元素不總是被父級overflow屬性剪裁，尤其是當overflow在絕對定位元素及其包含塊之間的時候
[注意]由於固定定位是相對於視窗定位的，所以固定定位元素無法被其所有的父級元素overflow屬性剪裁
【解決辦法】
【1】overflow元素自身為包含塊
給父級設置position:absolute或fixed或relative
【2】overflow元素的子元素為包含塊
在絕對定位元素和overflow元素之間增加一個元素並設置position:absolute或fixed或relative
<div style="overflow:hidden;">
<div style="position:relative">
<div style="position:absolute">絕對定位元素</div>
</div>
</div>
應用
當overflow設置為auto或scroll或hidden時可以觸發BFC，使得overflow可以實現一些相關應用。關於BFC的詳細信息移步至此
【1】清除浮動影響
[注意]IE6-瀏覽器使用overflow這種方式並不能清除浮動，常用的消除浮動的方法是
.clear{
*zoom: 1;
}
.clear:after{
content: '';
display: block;
clear: both;
}
【2】避免margin穿透
[注意]使用overflow屬性只是避免margin穿透的很多方法中的一個，其他的方法還有BFC化、設置padding、設置border等
【3】兩欄自適應布局
[注意]使用overflow屬性的場景限制比較明顯，常用的兩欄自適應布局的方法:
.cell{
display: table-cell; width: 2000px;
*display: inline-block; *width:auto;
}
【4】選項卡
overflow選項卡主要用於單頁應用
<div class="box">
<ul class="show">
<li class="show-in" id="one">1</li>
<li class="show-in" id="two">2</li>
<li class="show-in" id="three">3</li>
<li class="show-in" id="four">4</li>
</ul>
<nav class="con">
<a class="con-in" href="#one">1</a>
<a class="con-in" href="#two">2</a>
<a class="con-in" href="#three">3</a>
<a class="con-in" href="#four">4</a>
</nav>
</div>
body{
margin: 0;
text-align: center;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
.show{
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
line-height: 100px;
font-size: 40px;
}
.show-in{
width: 100px;
height: 100px;
}
#one{
background-color: lightgreen;
}
#two{
background-color: lightyellow;
}
#three{
background-color: lightblue;
}
#four{
background-color: pink;
}
.con{
margin: 10px 0 0 10px;
width: 100px;
}
.con-in{
display:inline-block;
width: 16px;
line-height: 16px;
border: 1px solid black;
background-color: gray;
}