In-depth understanding: overflow: hidden - overflow, collapse, clear float

 

In-depth understanding: overflow: hidden - overflow, collapse, clear float

overflow: hidden is a magical use of the overflow property, which can help us hide overflowed elements, clear floats and uncollapse. When a certain attribute has so many functions, it will inevitably be difficult to grasp, but don't be afraid, just believe: after reading this article, I believe you can definitely master the usage of overflow:hidden.

The following code will be used as the basic demo code. Every time a new function is explained, we have to restore the code to the following: 
CSS style:

 .container{
            background-color: black; } .div1{ background-color: aqua; width: 100px; height: 100px; } .div2{ background-color: red; width: 100px; height: 100px; }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

html content:

<div class="container">
    <div class="div1"></div> <div class="div2"></div> </div>

• 1
• 2
• 3
• 4

Program running effect: 

1. Use overflow: hidden to hide overflow

When the parent div has a fixed height, such as height:500px, we use overflow:hidden to hide the overflow. 
When using div+css layout, there will be a lot of div nesting - one or more child divs are nested within the parent div, by default, the height of the parent div is auto - it can be expanded arbitrarily by the child div . However, the parent div can also have a fixed height (or width), such as height: 500px, then if the height of the child div exceeds this value, by default, the child div will exceed the constraints of the parent div, which is overflow. We can control the child div by setting the CSS property of the parent div - overflow. Here overflow:hidden is used to hide the overflowing part of the child element.

2. Use overflow: hidden to clear the float

When the height of the parent element is: auto, we use overflow: hidden to clear the float. 
When we add a property to div1 and div2: float: left, we will find that the background color is black and the parent div disappears because: Floated elements break away from document elements and do not take up space. Elements that do not float will directly ignore this element: the parent div ignores its two children, and its height is 0 (because we did not set the height of the parent div), so the parent div does not appear. 
 
There are two ways to make the parent div "forgiving" to accept his two children: 
(1) The first is to let the father float up. We try to add a CSS property to the parent div: float:right, and we will find two A color block appears on the right side of the screen, and there is still no parent div. However, it is not difficult to see through the developer tools that the parent div has contained the child div. 

 
This is because the floating div has lost its ability to "dominate a line", we need to Manually set a width for the parent div, such as width: 500px, and then you can see: 
 
(2) The second is to add the overflow:hidden attribute to the parent to clear the float

 .container{
            background-color: black; overflow:hidden; }

• 1
• 2
• 3
• 4

The effect at this time is shown in the figure: 

Summary: 
(1) (2) One uses the strategy of all floating, and the other uses the strategy of clearing the floating so that the parent div accepts the child div leniently. The difference between the two is that both need to be floated. The width of the parent div is additionally set, because the floating div loses the div's exclusive line feature, and clearing the floating parent div is still overbearing.

3. Lift the collapse

You can use overflow:hidden to cancel the margin collapse. Of course, the collapse is regardless of whether the height of the parent div is fixed or not. 
First of all, we need to know what collapse is: 
we add an attribute to div1: margin-top: 50px, we imagine the effect is like this : 
 
but it's actually like this (this is the effect under the developer tools): 
 
it can be seen that the top of div1 is 50px from the top of the browser instead of its parent div, and what's even scarier is that it even tops down It's the parent div, which is collapsed. One more thing here: this collapse is only for the first son of the father, and there is nothing wrong with div2 setting margin-top: 50px. 
(1) We can add overflow: hidden to the parent div to solve this problem:

  .container{
            background-color: black; overflow: hidden; }

• 1
• 2
• 3
• 4

The effect is as shown in the figure: 

(2) Thinking readers will definitely consider whether floating can solve this annoying problem. Here, in order to exclude the influence of overflow: hidden on the parent div of undetermined height, we set a height for the parent div:

.container{
            background-color: black; height: 200px; }

• 1
• 2
• 3
• 4

We add a float property (such as float:left) to all child divs. Obviously, as long as the child divs are floating, the collapse problem will be completely avoided (PS: whether the parent div is floating or not): 
 
Summary 
can use overflow:hidden to lift the collapse , the floating div doesn't need to collapse at all.

4. Summary

The usage of overflow:hidden is mainly to distinguish whether the parent div has a fixed height in overflow and clearing the float. It also has the additional responsibility of dissolving the collapse.

 

Reference: https://blog.csdn.net/hukaihe/article/details/51298665