Share CSS overflow overflow example tutorial

Clip the left/right edge of the content in the div element - if it overflows the content area of ​​the element:

div
{
overflow-x:hidden;
}

Browser support

All major browsers support the overflow-x attribute.

Note: The overflow-x attribute does not work correctly in IE8 and earlier browsers.

Definition and Usage

The overflow-x attribute specifies whether to clip the left/right edges of the content - if it overflows the element's content area.

overflow-X | overflow-y

The properties of overflow-x and overflow-y were originally properties independently developed by IE browser. It was later adopted and standardized by CSS3. overflow-x is mainly used to define the shearing of horizontal content overflow, and overflow-y is mainly used to define the shearing of vertical content overflow

[Note] If the overflow-x and overflow-y values The same is equivalent to overflow. If the overflow-x and overflow-y values ​​are different, and one of the values ​​is explicitly set to visible or is not set, the default is visible, and the other value is a non-visible value. The visible value will be reset to auto

Value: visible | hidden | scroll | auto | inherit | no-display | no-content

Initial value: visible

Applies to: block-level elements, replacement elements, table cells

Inheritance: None

Attribute

visible

The content of the element is also visible outside the element box

[Note 1] The containing block of the element in IE6-browser will be extended so that its excess content can be wrapped

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

<p>
    </p><p></p>

The picture on the left is IE6-browser, the picture on the right is other browsers

## [Note 2] There is a bug in the buttons of IE7-browser (including and ). When there is more text on the button , the larger the padding on both sides of the button. This problem can be solved by setting overflow:visible

The picture on the left shows the default situation, and the picture on the right shows the situation after setting overflow

##auto

If the content is clipped, the browser will display scroll bars In order to view the rest of the content

[Note] For general browsers, and have the overflow:auto attribute by default. But IE7-browser is different. There is a vertical scroll bar by default

//IE7-浏览器 
html{overflow-y: scroll;}//其他浏览器
html{overflow: auto;}//去除页面默认滚动条
html{overflow: hidden;}

scroll

The content of the element will be in the element box Clipping at the border, but the browser will display scroll bars to view the rest of the content

[Note] Firefox and IE8+ browsers have a missing

padding-bottom

phenomenon when using overflow:scroll or auto.

.box{
    width: 100px;
    height: 100px;
    padding: 50px;
    background-color: pink;
    overflow:scroll;
}.in{
    width: 100px;
    height: 200px;
    background-color: lightgreen;
}

<p>
    </p><p></p>

The picture on the left shows the situation of the chrome browser, and the picture on the right shows the situation of the firefox browser

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>
    </p><p>
        </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>
    </p>

        
• 1
        
• 2
        
• 3
        
• 4
    

    

        1         2         3         4     

    

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

The above is the detailed content of Share CSS overflow overflow example tutorial. For more information, please follow other related articles on the PHP Chinese website!