輕輕鬆鬆學CSS:overflow

一、overflow的定義

    overflow,音【əʊvəˈfləʊ】,義【溢出】,就像2.2米的人躺在1.8米的床上,腿得耷拉到床外一樣。overflow 屬性用於控制內容溢出容器時顯示的方式

二、overflow的屬性值

【1】visible,默認值(確切地說是絕大數元素的默認值,html、textarea的overflow默認值是auto),overflow:visible表示溢出的內容在容器之外可見
  

<style>
    div{width:300px;height:100px;border:3px solid red;overflow:visible;}
</style>
 
<div>
    如果容器中的內容,超過了容器本身的寬度或高度時,內容就有可能溢出。此時,就可以使用overflow屬性來控制內容溢出時的處理方式。overflow:visible表示溢出部分可見。
    如果容器中的內容,超過了容器本身的寬度或高度時,內容就有可能溢出。此時,就可以使用overflow屬性來控制內容溢出時的處理方式。overflow:visible表示溢出部分可見。
</div>

 

  效果如下圖:


  
      儘管容器外面的內容是可見的,但它不會把周圍其它元素擠下去,但溢出的內容可能與周圍其它元素重疊

 【2】hidden,表示溢出的內容在容器之外被隱藏
   

<style>
    div{width:300px;height:100px;border:3px solid red;overflow:hidden;}
</style>
<body>  
<div>
    如果容器中的內容,超過了容器本身的寬度或高度時,內容就有可能溢出。此時,就可以使用overflow屬性來控制內容溢出時的處理方式。overflow:hidden表示溢出部分被隱藏。
    如果容器中的內容,超過了容器本身的寬度或高度時,內容就有可能溢出。此時,就可以使用overflow屬性來控制內容溢出時的處理方式。overflow:hidden表示溢出部分被隱藏。
</div>

 

      hidden與visible相反,它會把超出容器部分隱藏掉,被隱藏的部分徹底看不到(除非查看源代碼),overflow:hidden用的比較多,主要應用在清除浮動(下面要講)等方面
  【3】scroll,表示容器出現滾動條(包括水平滾動條和垂直滾動條),溢出的內容可以通過滾動條查看
   

<style>
    div{width:300px;height:100px;border:3px solid red;overflow:scroll;}
</style>
<body>  
<div>
    如果容器中的內容,超過了容器本身的寬度或高度時,內容就有可能溢出。此時,就可以使用overflow屬性來控制內容溢出時的處理方式。overflow:scroll表示溢出部分通過滾動條查看,滾動條有點傻,不管是否需要,它都存在。
    如果容器中的內容,超過了容器本身的寬度或高度時,內容就有可能溢出。此時,就可以使用overflow屬性來控制內容溢出時的處理方式。overflow:scroll表示溢出部分通過滾動條查看,滾動條有點傻,不管是否需要,它都存在。
</div>

 


    scroll有點傻乎乎的,(水平方向、垂直方向)不管是否溢出,滾動條都會出現。正因為如此,overflow:scroll有點影響美觀,所以用的不是很多。


【4】auto,表示容器出現滾動條(包括水平滾動條和垂直滾動條),溢出的內容可以通過滾動條查看
  

<style>
    div{width:300px;height:100px;border:3px solid red;overflow:auto;}
</style>
<body>  
<div>
    如果容器中的內容,超過了容器本身的寬度或高度時,內容就有可能溢出。此時,就可以使用overflow屬性來控制內容溢出時的處理方式。overflow:auto表示溢出部分通過滾動條查看,滾動條的出現更智能,按需出現。
    如果容器中的內容,超過了容器本身的寬度或高度時,內容就有可能溢出。此時,就可以使用overflow屬性來控制內容溢出時的處理方式。overflow:auto表示溢出部分通過滾動條查看,滾動條的出現更智能,按需出現。
</div>

 


    auto,更智能,根據需要出現滾動條,水平方向或垂直方向哪個有溢出哪個方向才出現滾動條。正因為如此,overflow:auto相比scroll更美觀,所以用的較多。

三、應用

  當overflow設置為auto或scroll或hidden時可以觸發BFC(只要不是overflow:visible,overflow的其它屬性都能觸發BFC),使得overflow可以實現一些相關應用。(關於BFC,簡單地說就是自成系統,與系統外彼此互不干擾,詳細內容讀者可以搜索相關資料,此處不贅述)

【1】清除浮動
  

<style>
    img{float:left;}
    .box{background:lightblue;overflow:hidden;}
</style>
<body>
    
    <div class="box">
        <img src="img/guanggao.jpg">
    </div>
</body>

  

【2】避免margin穿透
  

<style>
    img{display:block;}
    .box{background:lightblue;overflow:hidden;}
</style>
<body>
    <div class="box">
        <img src="img/guanggao.jpg">
    </div>
</body>

 


 【3】兩欄自適應布局
  

<style>
    .left{float:left;}
    .right{background-color:lightgreen;overflow:hidden;}
    p{background-color:olive;}
</style>
<body>
        <div class="left">
            <img src="img/guanggao.jpg">
        </div>
        <div class="right">
            <p>abc</p>
            <p>bcd</p>
            <p>cde</p>
            <p>def</p>
            <p>efg</p>
            <p>fgh</p>
            <p>ghi</p>
        </div>
</body>

 

 

  
 【4】選項卡(錨點)
  

<style>
    
    .box{
        width:300px;
        height:300px;
        background:lightblue;
        overflow:hidden;
    }
    .list{
        width:300px;
        height:300px;
        color:red;
        text-align:center;
        line-height:300px;
    }
    
    .link{
        width:300px;
        margin-top:50px;
    }
    .click{
        padding:5px 10px;
        border:3px solid #ccc;
    }
</style>
<body>
    
    <div class="box">
        <div class="list" id="one">1</div>
        <div class="list" id="two">2</div>
        <div class="list" id="three">3</div>
        <div class="list" id="four">4</div>
    </div>
    <div class="link">
        <a class="click" href="#one">1</a>
        <a class="click" href="#two">2</a>
        <a class="click" href="#three">3</a>
        <a class="click" href="#four">4</a>
    </div>
</body>