Overflow: Den den attributes

Overflow: the CSS style "hidden" is a common CSS style. However, most people only have a limited understanding of this style, but they do not know much about the meaning of clearing floating.

When we mention clearing floating, we will think of another CSS style: clear: Both. I believe that everyone can understand this property. But what is the meaning of the word "floating? The following describes in detail.

<Div id = "Wai">
<Div id = "Nei"> </div>
</Div>

This is a common Div writing method. Let's write the style below. You can test it on your own in DMX.

# Wai {width: 500px; Background: #000; Height: 500px ;}

# Nei {float: Left; width: 600px; Height: 600px; Background: red ;}

As you can see, I added a float to the Nei ID. Our general understanding is that we allow other content to the right of the DIV Of The Nei ID, as long as its width does not exceed the remaining values of the DIV and Nei Div of Wai.

If Div Wai contains other Divs, I do not allow them to appear on the right side of Nei. We use the clear: both style to specify the DIV and do not allow it to float on the right side of Nei.

These are correct in IE6. But in Firefox or other browsers, we found the problem was not that simple. We found that when the width and height of the Nei Div are greater than that of the Wai Div, Wai is not supported but is still displayed as the specified width and height. In my example, 500 is used.

At this time, I did not understand it. I searched a lot of materials, but did not understand why. Until I saw someone else added an overflow to the DIV of Wai in a similar situation: the property of hidden solves this problem.

Until overflow: hidden is used to hide overflow. After this attribute is added to Wai, the width and height of our nei are automatically hidden. In addition, after we try to delete the height value of the DIV, we find that the height of Wai is automatically lifted by the height value of the DIV Nei.

Here, let's take a look at the meaning of the word "floating. Our original understanding is that the floating on a plane, but through this experiment, we found that it is not just a floating on a plane, but a three-dimensional floating!

That is to say, when the Nei div is added with the floating property, it has been removed from the Wai Div on the display side. That is to say, what is the width and height of Nei at this time?
For the isolated Wai, it does not work. The metaphor for an image is that when JJ leaves BB, the size of JJ does not play a major role in BB (a bit less suitable ).
-_-|)

OK. When we fully understand the meaning of the word floating, we will understand the explanation in the overflow: hidden attribute and what it means to clear floating. That is to say,
When we add the overflow: hidden attribute to the DIV of Wai, The Nei and so on of the DIV with the floating attribute are cleared in the three-dimensional floating, just fine.
Compared with JJ, the size of JJ naturally affects the size of BB.

This is the exact meaning of the overflow: hidden property to clear the floating.

When we do not set the height for the DIV of Wai, the height of the DIV of Nei will support the DIV of Wai. On the other hand, we should note that when we give
The Wai Div is added with a height value. No matter how high the Nei div is, the Wai height is our set value. When the Nei height exceeds the Wai height
The output part is hidden. This is the meaning of hiding overflow!

I believe that through my texts, you have a new understanding of the overflow: hidden attribute. I hope that everyone will continue to improve in Div + CSS learning like me!