div{overflow-x:hidden;}
瀏覽器支援
所有主流瀏覽器都支援 overflow-x 屬性。
注釋：overflow-x 屬性無法在 IE8 以及更早的瀏覽器正確地工作。
定義和用法
overflow-x 屬性規定是否對內容的左/右邊緣進行裁剪 - 如果溢出元素內容地區的話。
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;}
<p class="box"> <p class="in"></p></p>
左圖為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;}
<p class="box"> <p class="in"></p></p>
左圖為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
<p style="overflow:hidden;"> <p style="position:relative"> <p style="position:absolute">絕對位置元素</p> </p> </p>
當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選項卡主要用於單頁應用
<p 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> </p>
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;}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
