Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "what is the cause of overflow hidden failure". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

In fact, seemingly unreasonable phenomena will have reasonable explanations behind them.

We know that there are several types of overflow attribute values:

The code is as follows:

visible: Declares that the content will not be clipped. For example, content may be rendered outside the container.

hidden: Declares that the content will be cropped, and there is no need to scroll to see the cropped content.

scroll: Declares that the content will be cropped, but a scroll bar may appear to view the cropped content. The scroll bar appears between the inner border edge and the outer padding edge.

auto: Declares that the decision will depend on the client, preferring scroll.

The W3C standard states:

Usually the contents of a box are confined within the box boundaries. But sometimes overflow occurs, where some or all of the contents go outside the box boundary. Overflow occurs when one of the following conditions is met:

The code is as follows:

1. An unwrapped line element is wider than the container box.

2. A fixed-width block element is placed inside a container box that is narrower than it.

3. The height of an element exceeds the height of the container box.

4. A descendent element with some content outside the box due to negative margin values.

5. The inline element caused by the text-indent attribute is outside the left and right boundaries of the box.

6. An absolutely positioned descendant element, partially outside the box. But the excess isn't always clipped. The contents of a descendant element are not clipped by the overflow setting of the ancestor element between the descendant element and its containing block.

When overflow occurs, the overflow attribute specifies whether the container box will clip out beyond its inner boundary and determines whether a scroll bar will appear to access the clipped content. It affects the clipping of all elements, except for the case mentioned in item 6 above: if the containing blocks of an element's descendants are entire viewports or ancestor elements of the element, 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 its nearest block-level ancestor element. But when the element is set to absolute positioning, the containing block is determined by the nearest ancestor element whose position is not static.

It seems a bit convoluted, so let's hear a simple story.

html Fragment:

The code is as follows:

Mrs. Smith couldn’t get her husband to exercise.

She asked Mrs. Jones what she should do. Jones replied,

"Tape the remote control between his toes. "

style:

The code is as follows:

div.ocean{

position:relative;

background-color:blue;

width:120px;

height:120px;

}

div.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 code above tells the story of a red earth in a blue ocean and a yellow segment in a red earth. Because of the settings of the paragraph style, part of it goes beyond the red earth. In order to avoid the yellow segment pollution to the blue ocean, the red earth vigilantly set overflow:hidden for itself; so that the yellow part beyond the earth will be cut off, and what we see will be such a harmonious scene, as shown in Figure 1:

Figure 1: Harmonious Planet

If things were so rational and orderly, the world would be peaceful. Before long, the yellow paragraph felt that his prominent identity should not be controlled by the red earth, so he racked his brains to change himself into an absolute position and immediately got rid of the shackles of the earth, as shown in Figure 2:

The code is as follows:

p.joke{

position:absolute;

width:150px;

height:110px;

top:30px;

left:30px;

background-color:yellow;

}

Figure 2: Rampant paragraph

Why is this happening? This creates the sixth condition mentioned above. When the yellow segment changes to position:absolute, its containing block has been upgraded from the original red earth content boundary to the blue ocean where its nearest position is not static. The ocean didn't know anything about this at the moment. It didn't set the overflow:hidden attribute, which caused all the parts of the yellow segment that should have been cut to be visible. Not only did it pollute the ocean, but it also affected the entire planet. The situation was extremely urgent. Even if the ocean setting is overflow:hidden, you can only clip the yellow part beyond the blue ocean, just like Figure 3. The ocean is at a loss at this time.

Figure 3: The Innocent Ocean

As the saying goes, good, evil is one foot higher than the road, and the bell must be tied. How can the red earth be willing to run away? How can the earth be said to be the ancestral element of Duan Zi, and how can it be willing to let Duan Zi do wrong? Then the earth, after a thousand trials, found the secret script, added the position:relative attribute to its own style, and changed the containing block of the paragraph to the earth to decide. This time, the joke was obediently locked up. The planet appears to be returning to its original state.

The code is as follows:

div.ocean{

position:relative;

background-color:blue;

width:120px;

height:120px;

}

div.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 doesn't fail, but it's possible that we're dealing with a situation that happens to satisfy condition 6, causing the block of elements to change. In the story above, it is also mentioned that in case of 'hidden' failure, the containing block of the element can be changed as needed to achieve the goal of justice.

"What is the cause of overflow concealment failure" is introduced here. Thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.