Easily misunderstood overflow: hidden

To ensure page robustness, we often need to use overflow: hidden. Sometimes it is to prevent layout from being opened, sometimes it is to cooperate with other rules to achieve text truncation, and sometimes it is purely to create block-level context. However, many people may misunderstand this attribute. Many introductory documents or articles on the Internet only refer to overflow: hidden and fixed width (or height) you can forcibly hide content that exceeds the container. When we used overflow: hidden to create block-level context to achieve image-text mixing, we thought overflow: hidden makes it difficult in special circumstances (see adaptive two-column image/Text mixing improvement ). However, if you carefully read the CSS specification, you will find that overflow: hidden does not necessarily hide the overflow content. Clearfix improvement and overflow I translated earlier: the second part of the hidden explanation is explained. However, the focus of this Article is on clearing floating, therefore, I did not pay attention to the issue of overflow.

Overflow: hidden does not hide all overflow child elements

The biggest misunderstanding of overflow: hidden: When overflow: hidden is applied to a container with at least one of its heights and widths, any internal overflow content will be cropped (hidden ). But is that true? The answer is "not necessarily "! The fact is that element overflow within a block element with the overflow: Den den style is not always hidden. Specifically, the following conditions must be met:

1. Block elements with the overflow: hidden style do not have the position: relative and position: absolute styles;
2. The internal overflow element is absolutely located through position: absolute;

If you only care about the conclusion, remember these two points. Here I have a demo with the following structure:

<div class="position">    
I simply cut a few pictures to look at the shoes that are too lazy to open the demo:
 
 
In the demo, you can see that the absolute positioning element is located outside the parent element of overflow: hidden, but it is still displayed. The overflow of common elements in the horizontal direction is hidden, and the parent element is supported in the vertical direction. That is to say, the performance of common elements is in line with our expectations, and absolute positioning elements are not hidden as many people take for granted.
Theoretical Basis
So what is the principle? Of course, it is the css2.1 specification. In the overflow description in the Specification, we can find the following:

 

 
  
This property specifies whether content of a block container element is clipped when it overflows the element's box. it affects the clipping of all of the element's content should t any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

 
Overflow specifies whether to crop a block element container when its content overflows the boundary of the box model. This attribute affects the tailoring of all content of the applied element. However, if the descendant element'sContained blockIt is not affected when the entire view area (usually the visible area of the browser content, which can be understood as the body element) or the parent element of the container (which defines the overflow element.
Even the language I reorganized is a bit difficult. However, in this section, there is an important term "containing block ). What are contained blocks? This is actually quite familiar to everyone. An absolute positioning element, including a block, is the closest ancestor element with the relative or absolute positioning attribute. If any level-1 ancestor element does not match, the contained block is the body element.
This shows that whether an absolutely positioned element is hidden by overflow: hidden depends on the position of its contained block relative to overflow: hidden. This is like the US military stationed in Japan. They are not subject to Japanese law and are subject to American military law. Because their "inclusion block" is a US military, not a Japanese court.
In fact, in section 11.1 of the css2.1 specification, there are more specific instructions:

 

 
  
A descendant box is positioned absolutely, partly outside the box. such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block.
 
  
Translation:
 
  
An absolute position of the Child block element, part of which is located outside the container. Whether or not such elements are cropped does not always depend on the ancestor container that defines the overflow attribute.Ancestor container between themselves and their contained BlocksOverflow attribute pruning.

 
Back to my demo, the overflow element is located between the relative positioning element and the absolute positioning element, so it cannot be tailored to the absolute positioning child element according to the regulations. That is to say, Grandpa is relatively positioned. Dad requires overflow and hiding, but his son is an absolute positioning element. At this time, it is up to grandpa to decide whether to hide his son, not Dad.
Application scenarios
What is the guiding significance of understanding this theory for our work?
First, we know that overflow: hidden is not omnipotent. to thoroughly crop all its sub-elements, it must not only have overflow: hidden, but also be used as the inclusion block of all sub-elements. In this case, if you see that the stuff in overflow: Den den is displayed one day, you will know why.
Secondly, if we first define overflow: hidden to prevent the container from being opened, or use this method to process the text and text of Shenma, clear the float, or even use overflow: hidden to implement block-level context such as the upper-level stuff, suddenly the product said that the inside of a floating layer to display, to the right, to the upper right corner, to the left of the two columns outside ...... Then you will know what to do.
In oocss, the module definition makes full use of this feature. The basic structure of the oocss module is as follows:
<div class="mod">    <div class="inner">        <div class="hd"></div>        <div class="bd"></div>        <div class="ft"></div>    </div></div>
They applied position: relative to inner and overflow: hidden and _ ZOOM: 1 to BD. If you are interested, you can study it.