轻轻松松学CSS:overflow | 沙漠中的绿洲2019

一、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>

　　效果如下图：

轻轻松松学CSS:overflow-LMLPHP
　　尽管容器外面的内容是可见的，但它不会把周围其它元素挤下去，但溢出的内容可能与周围其它元素重叠

【2】hidden，表示溢出的内容在容器之外被隐藏

<style>
    div{width:300px;height:100px;border:3px solid red;overflow:hidden;}
</style>
<body>
<div>
    如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：hidden表示溢出部分被隐藏。
    如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：hidden表示溢出部分被隐藏。
</div>

轻轻松松学CSS:overflow-LMLPHP

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>

轻轻松松学CSS:overflow-LMLPHP

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>

轻轻松松学CSS:overflow-LMLPHP
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>

　　轻轻松松学CSS:overflow-LMLPHP

【2】避免margin穿透

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

轻轻松松学CSS:overflow-LMLPHP
【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>

轻轻松松学CSS:overflow-LMLPHP
【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>

轻轻松松学CSS:overflow-LMLPHP