About the cause of overflow concealment (Overflow:hidden) failure

This article mainly introduces about overflow hiding (Overflow:hidden) failure reasons, has a certain reference value, now share to everyone, have the need for friends can refer to

In the project, students often encounter such problems, the phenomenon is to set the element Overflow:hidden, but the part of the container is not hidden, is it set hidden invalid?

In fact, there is a reasonable explanation behind the seemingly unreasonable phenomenon.

We know that there are several overflow attribute values:

Visible: The declared content is not clipped. For example, content may be rendered outside the container. Hidden: The declared content will be clipped, and you don't want to use the scroll bar to see what is clipped. Scroll: The declared content will be clipped, but a scrollbar may appear to see what is clipped. The scroll bar appears in the inner border Adge and outer padding Adge. Auto: Declares that the decision will depend on the client, using scroll first.

In the standard:
Usually the contents of a box are confined within the bounds of the box. Sometimes, however, there is an overflow, in which part or all of the content runs outside the box boundaries. The overflow will occur when one of the following conditions is true:

1. A line element with no newline width exceeds the width of the container box. 2. A block element with a fixed width is placed in a container box that is narrower than it. 3. The height of an element exceeds the height of the container box. 4. A descendant element, which is caused by a negative margin value, is outside the box. 5. The Text-indent property causes the inline element to be outside the left and right bounds of the box. 6. An absolutely positioned descendant element, part of the content outside the box. But the excess is not always clipped. The content of a descendant element is not clipped by the overflow of the descendant elements and the ancestor elements of their containing blocks.

When an overflow occurs, the overflow property contracts whether the container box trims the part beyond its bounds and determines whether a scrollbar is present to access the clipped content. It affects the trimming of all elements of the element, but there is an exception, as mentioned in 6th above: the inclusion block (containing blocks) of the descendant element of the element is the entire window (viewport) or the element's ancestor, and the content will not be clipped. What is a containment block? Simply put, it is a block that can determine the position and size of an element. Usually the containing block of an element is determined by the content boundary of the block-level ancestor element closest to it. However, when the element is set to absolute positioning, the containing block is determined by the ancestor element of the nearest position not static.

Look a bit around, let's listen to a simple story.

HTML fragment:

<p class= "Ocean" >    <p class= "Land" >        <p class= "joke" >                Mrs Smith couldn ' t get her husband to exercise.                 She asked Mrs Jones what she should does. Jones replied,                 "Tape the remote control between his toes."        </p>    </p></p>

Style

p.ocean{    position:relative;    Background-color:blue;    width:120px;    height:120px;    } p.land{    width:100px;    height:100px;    background-color:red;    Overflow:hidden;    } p.joke{    width:150px;    height:110px;    margin-top:30px;    margin-left:30px;    Background-color:yellow;    }

The above code tells the story of a red earth in the blue ocean and a yellow piece in the red earth. Due to the setting of the satin style, some of its contents go beyond the red earth. In order to avoid pollution of the yellow satin to the blue ocean, the red earth is wary of setting up a overflow:hidden for itself, so that the yellow part of the Earth is cut off, and what we see will be such a harmonious scene, 1:

Figure 1: A harmonious planet

If things are so rational and orderly, the world will not be peaceful. Not long, the yellow satin feel that their own eminent identity should not be under the control of the red earth, and then racked his brains to change into an absolute position, suddenly get rid of the shackles of the Earth, 2:

p.joke{    Position:absolute;    width:150px;    height:110px;    top:30px;    left:30px;    Background-color:yellow;    }

Figure 2: Rampant jokes

Why is that? This is the creation of a 6th condition mentioned above. When the yellow satin becomes position:absolute, its containing block has been upgraded from the original red Earth's content boundary to the nearest position, not the static blue ocean. And the ocean at this moment do not know anything about it, itself did not set the Overflow:hidden property, resulting in the yellow satin should be cropped part of all visible, not only pollution to the sea, but also affect the whole planet, the situation is extremely schemes he devises ah. Even when the ocean is set on the Overflow:hidden, it can only be cut out of the yellow part of the blue ocean, as in Figure 3, the ocean is at a loss.

Figure 3: The Innocent Ocean

As the saying goes, the devil is a foot in the road, and the bell must be fastened. How can the red earth willingly go out? How to say that the earth is after all the ancestral elements of the joke, how can be reconciled by the jokes. So, the earth through thousands of Xin, find cheats, in their own style to add the Position:relative attribute, the inclusion of the pieces of the block and changed to the earth to decide. The next joke was locked up. The planet looks back to its original state.

p.ocean{    position:relative;    Background-color:blue;    width:120px;    height:120px;    } p.land{    position:relative;    width:100px;    height:100px;    background-color:red;    Overflow:hidden;    } p.joke{    Position:absolute;    width:150px;    height:110px;    top:30px;    left:30px;    Background-color:yellow;    }

So, hidden does not fail, but it is possible that we have met the condition of the 6th conditions, so that the elements of the inclusion of the block has changed. In the above story, it is also mentioned that in the case of ' hidden ' failure, you can change the element's containing block to achieve the goal of justice as needed.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!