作者:
WangMin
格言:努力做好自己喜歡的每一件事
在CSS中，如果給一個盒子設置了固定的寬度與高度，但內容過多就會溢出盒子本身的寬度或高度。此時，就可以使用 overflow 屬性來控制內容溢出時的處理方式。那么接下來就開始來學習這個屬性吧！
overflow 屬性值如下：
| 屬性值 | 含義 |
|---|---|
| visible | 不剪切形式也不添加轉動條，也就是元素的內容在元素框之外也可見 |
| auto | 如果內容被剪裁，則瀏覽器會顯示滾動條以便查看其余的內容 |
| hidden | 元素的內容會在元素框的邊界處剪裁，並且超出元素框之外的內容不可見 |
| scroll | 元素的內容會在元素框的邊界處剪裁，但瀏覽器會顯示滾動條以便查看其余的內容 |
overflow 屬性的延伸：overflow-X | overflow-y
| 屬性 | 含義 |
|---|---|
| overflow-x | 主要用來定義對水平方向內容溢出的剪切 |
| overflow-y | 主要用來定義對垂直方向內容溢出的剪切 |
[注意]：如果 overflow-x 和 overflow-y 值相同則等同於overflow；如果overflow-x和overflow-y值不同，其中一個值顯式設置為visible或未設置默認為visible，而另外一個值是非visible（除默認值以外的其他值）的值，則visible值會被重置為auto。
overflow：visible
如果沒有給元素設置 overflow屬性，表示使用其默認值 visible，讓溢出的內容可見。此時，溢出的內容就會渲染到盒子的外面。例如，有一個盒子設置了固定寬度和高度，其中它的內容的尺寸超過了盒子本身的尺寸，效果如下：
<div class="box">
<p>
在CSS中，如果給一個盒子設置了固定的寬度與高度，但內容過多就會溢出盒子本身的寬度或高度。
此時，就可以使用 overflow 屬性來控制內容溢出時的處理方式。那么接下來就開始來學習這個屬性吧！
</p>
</div>
.box{
width:150px;
height:150px;
overflow:visible;
background:pink;
color:#666;
}
[注意]：
1、溢出的內容不會改變盒子的形狀，盒子外面的內容是可見的，但它不會把周圍其他容器擠下去。所以，溢出的內容不會影響頁面布局，但溢出的內容可能與周圍其他容器重疊。
2、就上面的例子來說，在IE6和更低版本中，超出的內容會撐開盒子的高度，以便適應內容的尺寸。在IE6下，元素的高度根據自動撐開。
overflow：auto
如果把元素的 overflow屬性設置為 auto，則滾動條只在需要的時候出現，也就是當內容溢出元素時自動出現滾動條（溢出的內容滑動滾動條可以顯示），沒有溢出元素時不出現。就以overflow：visible上面提到的案例來說，效果如下：
.box{
width:150px;
height:150px;
overflow: auto;
background:pink;
color:#666;
}
overflow：hidden
如果把元素的 overflow屬性設置為 hidden，情況則與 overflow：visible 相反，它會把超出盒子的內容全部隱藏掉。就以overflow：visible上面提到的案例來說，效果圖如下：
.box{
width:150px;
height:150px;
overflow: hidden;
background:pink;
color:#666;
}
注意：這種情況下，因為盒子沒有出現滾動條，所以對用戶來說，被隱藏的內容就徹底看不到。overflow：hidden也可用於清除浮動。具體清除浮動的方法可參考 CSS 浮動和清除浮動方法總結
overflow：scroll
如果把 overflow屬性設置為 scroll，它將會隱藏渲染到盒子之外的內容，但會在盒子內部提供一個滾動條，從而可以查看剩下的內容。就以overflow：visible上面提到的案例來說，效果圖如下：
.box{
width:150px;
height:150px;
overflow: scroll;
background:pink;
color:#666;
}
這種情況下，無論內容是否溢出，都會在水平方向（overflow-x）和垂直方向（overflow-y）同時出現滾動條。
設置overflow失效的情況
絕對定位元素與固定定位元素不總是被父級overflow屬性剪裁，尤其是當overflow在絕對定位元素及其包含塊之間的時候，就以overflow：hidden上面提到的案例來說，這里我添加了一個.big 將 .box 包住，並給 .box 設置了絕對定位，效果圖如下：
<div class="big">
<div class="box">
<p>
在CSS中，如果給一個盒子設置了固定的寬度與高度，但內容過多就會溢出盒子本身的寬度或高度。
此時，就可以使用 overflow 屬性來控制內容溢出時的處理方式。那么接下來就開始來學習這個屬性吧！
</p>
</div>
</div>
.big{
width:150px;
height:150px;
overflow: hidden;
}
.box{
width:150px;
height:150px;
position: absolute;
background:pink;
color:#666;
}
因為絕對定位是相對於父元素定位的，所以絕對定位元素無法被它的父級元素overflow屬性剪裁 ，父級元素的overflow屬性就會失效。這里父元素 .big 的 'overflow: hidden;' 就失效了，怎樣來解決這個問題呢？那就給父級設置position:absolute或fixed或relative，父級元素的overflow屬性就會生效啦。這里我們給 .big設置一個 position: relative;屬性就可以了，效果如下：
.big{
width:150px;
height:150px;
position: relative;
overflow: hidden;
}
.box{
width:150px;
height:150px;
position: absolute;
background:pink;
color:#666;
}
以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這里!! 😄 后續繼續更新!!