Another layer of overflow:hidden meaning

Overflow:hidden This CSS style is commonly used in CSS style, but most people's understanding of this style is only limited to hidden overflow, and the meaning of clear floating is not very understanding. When it comes to clearing floats, we'll think of another CSS style: Clear:both, I'm sure there's no problem with the understanding of this property. But what does the word "floating" contain? Let us elaborate on the following.

This is a commonly used div notation, let's write the style below. You can do your own experiments.

#box {           width:500px;           Background: #000;           height:500px; } #content {           float:left;           width:600px;           height:600px;           

Adding a overflow:hidden To box this div solves this problem.

Until we overflow:hidden this property to hide the overflow and add this property to box, the width and height of our content are automatically hidden away.

In addition, after we do another experiment to remove the height value of the box Div, we find that the height of box is automatically stretched by the height value of the content div. Speaking of which, let's take a look at the meaning of the word "floating". Our original understanding was that the float on a plane, but through this experiment, we found that this is not only a flat float, but a three-dimensional float! That is, when the content of this div plus floating this property, on the side of the display, it has been out of the box of the Div, that is, the content of the width of the height is how much, for the already detached box, are not working. When we fully understand the meaning of the word floating, we understand the interpretation of the Overflow:hidden attribute and what it means to clear the float. That is, when we give box this div plus overflow:hidden this attribute, the content of the div with the floating attribute in this three-dimensional float has been cleared. This is the exact meaning that overflow:hidden this property clears the float. When we do not set the height of the Div, the content of this div will open up the Div, and on the other side, we should note that when we add a height value to the box div, whatever the height of the content div , the box height is the value we set. When the content is higher than the height of the box, the excess is hidden. This is the meaning of hidden overflow!

Another layer of overflow:hidden meaning