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 in DMX.
1 #box { 2 width:500px; 3 Background: #000; 4 height:500px; 5 } 6 #content { 7 float:left; 8 & nbsp; width:600px; 9 height:600px; 10 background:red;11 }
give box, this div adds a overflow:hidden. This attribute solves this problem.
We know Overflow:hidden This property is to hide the overflow, to add this property to box, our content of the width of the automatic is 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: floating on a plane, but through this experiment, we found that this is not just 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 the Div, and on the other side, we should note that when we add a height value to the box div, whatever the content What is the height of this div, the height of box 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!
The Overflowhidden property of CSS is explained in detail