溢出overflow: hidden

ゝ一世哀愁。 2021-12-03 10:39 348阅读 0赞

如果要防止内容把div[容器][Link 1]或者[表格][Link 2]撑大，可以在CSS中设置  
一、  
overflow: hidden; 表示如果内容超出容器大小，就把超出部分隐藏(相当于切掉)  
二、  
overflow: scroll; 这个表示给内容加上控制[滑块][Link 3]，可以在容器[内部][Link 4]拖动它查看，而不把容器撑大(相当于[窗体][Link 5]上的控制滑块)

当一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况

### 定义 ###

**overflow溢出**

值: visible | hidden | scroll | auto | inherit

初始值: visible

应用于: 块级元素、替换元素、表单元格

继承性: 无

\[注意\]除了IE7-浏览器外，其他浏览器都不支持给table-cell元素设置overflow属性。firefox和IE11浏览器不支持给table-cell元素的设置100%高度的子元素设置overflow属性

![1543474-20190701114734560-692692506.png][]

**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

应用于: 块级元素、替换元素、表单元格

继承性: 无

![1543474-20190701114811861-983548776.png][]

### 属性 ###

**visible**

元素的内容在元素框之外也可见

\[注意1\]IE6-浏览器中元素的包含块会延伸，使得可以包裹其超出的内容

.box{
        
        height: 200px;
        width: 200px;
        background-color: lightgreen;
    }
    .in{
        
        width: 300px;
        height: 100px;
        background-color: lightblue;
    }

左图为IE6-浏览器，右图为其他浏览器

![1543474-20190701114948949-330555272.png][]

\[注意2\]IE7-浏览器的按钮(包括<button>和<input type="button">两种)存在bug，当按钮上的文字越多时，按钮两侧的padding就越大。通过设置overflow:visible就可解决该问题

左图为默认情况，右图为设置overflow后的情况

![1543474-20190701115006100-833051334.png][]

**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;
    }

左图为chrome浏览器的情况，右图为firefox浏览器的情况

![1543474-20190701115123857-1778888900.png][]

**hidden**

元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见

**no-display**

当内容溢出容器时不显示元素，类似于元素添加了display:none属性一样

**no-content**

当内容溢出窗口时不显示内容，类似于元素添加了visibility: hidden属性一样

\[注意\]no-display和no-content这两个属性目前没有浏览器支持

### 失效 ###

绝对定位元素不总是被父级overflow属性剪裁，尤其是当overflow在绝对定位元素及其包含块之间的时候

\[注意\]由于固定定位是相对于视窗定位的，所以固定定位元素无法被其所有的父级元素overflow属性剪裁

![1543474-20190701115148579-625244033.png][]

【解决办法】

【1】overflow元素自身为包含块

给父级设置position:absolute或fixed或relative

![1543474-20190701115223285-811299854.png][]

2】overflow元素的子元素为包含块

在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative

<div style="overflow:hidden;">
        <div style="position:relative">
            <div style="position:absolute">绝对定位元素</div>    
        </div>    
    </div>

### 应用 ###

当overflow设置为auto或scroll或hidden时可以触发BFC，使得overflow可以实现一些相关应用。[关于BFC的详细信息移步至此][BFC]

【1】清除浮动影响

![1543474-20190701115300859-835818863.png][]

\[注意\]IE6-浏览器使用overflow这种方式并不能清除浮动，常用的消除浮动的方法是

.clear{
        
        *zoom: 1;
    }
    .clear:after{
        
        content: '';
        display: block;
        clear: both;
    }

【2】避免margin穿透

![1543474-20190701115341603-1558779190.png][]

\[注意\]使用overflow属性只是避免margin穿透的很多方法中的一个，其他的方法还有BFC化、设置padding、设置border等

【3】两栏自适应布局

![1543474-20190701115409693-1836529121.png][]

\[注意\]使用overflow属性的场景限制比较明显，常用的两栏自适应布局的方法:

.cell{
        
        display: table-cell; width: 2000px;
        *display: inline-block; *width:auto;
    }

【4】选项卡

overflow选项卡主要用于单页应用

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;
    }

![1543474-20190701115548262-763726938.png][]

转载于:https://www.cnblogs.com/yuer20180726/p/11113286.html

[Link 1]: http://www.so.com/s?q=%E5%AE%B9%E5%99%A8&ie=utf-8&src=internal_wenda_recommend_textn
[Link 2]: http://www.so.com/s?q=%E8%A1%A8%E6%A0%BC&ie=utf-8&src=internal_wenda_recommend_textn
[Link 3]: http://www.so.com/s?q=%E6%BB%91%E5%9D%97&ie=utf-8&src=internal_wenda_recommend_textn
[Link 4]: http://www.so.com/s?q=%E5%86%85%E9%83%A8&ie=utf-8&src=internal_wenda_recommend_textn
[Link 5]: http://www.so.com/s?q=%E7%AA%97%E4%BD%93&ie=utf-8&src=internal_wenda_recommend_textn
[1543474-20190701114734560-692692506.png]: /images/20211203/acddf6f280884313a9709e5eee52b550.png
[1543474-20190701114811861-983548776.png]: /images/20211203/c493dfd35a694625b4d79324b00f1647.png
[1543474-20190701114948949-330555272.png]: /images/20211203/8afc271c2dc0417d860d8347741a1e9d.png
[1543474-20190701115006100-833051334.png]: /images/20211203/f745ddb4cc434090a7f916f79fad821e.png
[1543474-20190701115123857-1778888900.png]: /images/20211203/347643676fcc426cb65e5e3b38eb36b7.png
[1543474-20190701115148579-625244033.png]: /images/20211203/3d9dac8319ae48d081015ff15c556c44.png
[1543474-20190701115223285-811299854.png]: /images/20211203/5359ad915558446abe58fa9bd383702d.png
[BFC]: http://www.cnblogs.com/xiaohuochai/p/5248536.html
[1543474-20190701115300859-835818863.png]: /images/20211203/db19e89aabdf46118c8575430fd2caf6.png
[1543474-20190701115341603-1558779190.png]: /images/20211203/aef24caae6384d9cbc0ebfcfbacd861b.png
[1543474-20190701115409693-1836529121.png]: /images/20211203/622596c59c7145f9b27bd619980a685c.png
[1543474-20190701115548262-763726938.png]: /images/20211203/c25c78e5c2fd4ee58ff4c386a431cfe7.png