轻轻松松学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>