Sharing CSS Overflow Overflow example tutorial

Crop 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 property.

Note: The Overflow-x property does not work correctly with IE8 and earlier browsers.

Definition and usage

The Overflow-x property specifies whether to crop the left/right edge of the content-if the element's content area overflows.

Overflow-x | Overflow-y

The properties of Overflow-x and Overflow-y were originally developed by IE browser, and were later adopted by CSS3 and standardized. Overflow-x is primarily used to define cuts that overflow the horizontal content, while overflow-y is primarily used to define the clipping of content overflow in the vertical direction

[note] This is equivalent to overflow if the overflow-x and overflow-y values are the same. If the overflow-x and overflow-y values are different, and one of the values is explicitly set to visible or not set to visible by default, the other value is a non-visible value. The visible value is 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

Property

Visible

Element's content is visible outside the element box

[Note 1] The inclusion block of the element in the Ie6-browser extends so that it can be wrapped beyond its content

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

<p class= "box" >    <p class= "in" ></p></p>

Left image is ie6-browser, right image is other browser

[Note 2] ie7-browser buttons (including <button> and <input type= "button" > Two) have a bug, and the more text on the button, the greater the padding on either side of the button. The problem can be resolved by setting overflow:visible

The left image is the default, and the picture on the right is the case after setting overflow

Auto

If the content is clipped, the browser displays a scroll bar to view the rest of the content

[note] For general browsers,,

ie7-browser html{overflow-y: scroll;} other browsers Html{overflow:auto;} Remove page default scrollbar Html{overflow:hidden;}

Scroll

The content of the element is clipped at the bounds of the element box, but the browser displays a scrollbar to see the rest of the content

[Note that there are padding-bottom deletions in the]firefox and ie8+ browsers when they are 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 class= "box" >    <p class= "in" ></p></p>

The picture on the left is the Chrome browser, and the picture on the right is the Firefox browser situation.

Hidden

The contents of the element are clipped at the bounds of the element box, and the contents of the clipping area are not visible

No-display

When the content overflows the container, the element is not displayed, similar to the element where the Display:none attribute is added

No-content

Content is not displayed when the content overflows the window, similar to the element added with the Visibility:hidden property

[Note that both the]no-display and No-content properties do not currently have browser support

Failure

An absolutely positioned element is not always clipped by the parent overflow property, especially if the overflow is between an absolutely positioned element and its containing block.

[note] Fixed positioning elements cannot be clipped by all of their parent element overflow attributes because fixed positioning is relative to the viewport .

"Solution"

The "1" overflow element itself is a containing block

Set position:absolute or fixed or relative to parent

The child element of the "2" overflow element is the containing block

Adds an element between an absolutely positioned element and a overflow element and sets the Position:absolute or fixed or relative

<p style= "Overflow:hidden;" >    <p style= "position:relative" >        <p style= "Position:absolute" > Absolute positioning elements </p>        </p >    </p>

Application

BFC can be triggered when overflow is set to auto or scroll or hidden, allowing overflow to implement some related applications. More information about BFC

"1" clear floating effect

Note ie6-Browser Use overflow this way does not clear the float, commonly used to eliminate the floating method is

. clear{    *zoom:1;}. clear:after{    content: ";    Display:block;    Clear:both;}

"2" Avoid margin penetration

[note] Using the overflow property is just one of many ways to avoid margin penetration, other methods include BFC, setting padding, setting border, etc.

"3" Two-column adaptive layout

[note] The use of the overflow attribute of the scene limit is more obvious, commonly used two columns adaptive layout method:

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

"4" tab

The Overflow tab is primarily used for single-page applications

<p class= "box" >    <ul class= "show" >        <li class= "show-in" id= "one" >1</li>        <li class= "Show-in" id= "both" >2</li>        <li class= "show-in" id= "three" >3</li>        <li class= " Show-in "id=" four ">4</li>    </ul>    <nav class=" Con ">        <a class=" con-in "href=" #one ">1</a>        <a class=" con-in "href=" #two ">2</a>        <a class=" con-in "href=" #three ">3 </a>        <a class= "con-in" href= "#four" >4</a>    </nav>    </p>

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