A comprehensive exposition of Overflow:hidden attributes

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Overflow:hidden This CSS style is a common CSS style, but most people's understanding of this style is limited to hidden overflows, and it's not very clear what it means to purge floats.

When it comes to clearing the float, we think of another CSS style: Clear:both, I believe that the understanding of this attribute is not a problem. But what exactly does the word "floating" contain? Let's elaborate on this in detail below.

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

This is a common div notation, and here we write the style. You can experiment 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've added a float to nei this ID, and our general understanding is that we allow other content to appear on the right side of the div that nei this ID, as long as it does not exceed the remaining value of Wai this div and Nei div.

If the Div Wai also contains other Div, I do not allow it to appear on the right side of Nei, we use the style clear:both to specify this div, do not allow it to float on the right side of Nei.

These are correct in the IE6. But in Firefox or other browsers, we find that the problem is not so simple. We found that when nei the width and height of this div is greater than the Wai Div, the Wai is not open to the inside but still shows the width of the height we specified. In my case, it's 500.

This time I did not understand, I searched a lot of information, but did not understand why, until I saw someone else in a similar situation to Wai this Div added a Overflow:hidden This attribute solves this problem.

We until overflow:hidden the function of this property is to hide the overflow, and after adding this property to Wai, our Nei is automatically hidden from the wide height. In addition, we do a test, will wai this div's height value removed, we found that the height of the Wai is automatically nei this div's height value to the open.

Here, let's understand the meaning of the word "floating". Our original understanding is that the float on a plane, but through this experiment, we find that this is not just a flat float, but a three-dimensional float!

In other words, when nei this div plus floating this property, on the side of the monitor, it has been separated from the Wai Div, that is to say, at this time the nei of the height is how much, for the Wai has been separated from the effect. The image of the analogy is when JJ out of the BB, JJ size for BB is not the role of distraction (a little children should not feel-_-| | |)

OK, when we fully understand the meaning of the word float, we understand the explanation in this attribute of Overflow:hidden, what does it mean to clear the float. In other words, when we give Wai this div plus overflow:hidden this attribute, where the NEI and so on with floating attributes of the div in this three-dimensional floating has been cleared, just like JJ and into the BB, the size of the penis will naturally affect the size of the BB.

This is the exact meaning of Overflow:hidden this property to clear the float.

When we do not give Wai this div set height, nei this div height, will open wai this div, and in another respect, we should notice that when we give Wai this div plus a height value, then no matter nei this div height is how much, Wai This height is the value we set. When the height of the Nei exceeds the height of the Wai, the excess is hidden. This is the meaning of hidden overflow!

I believe that through my words, we have a new understanding of Overflow:hidden this attribute. Hope everyone and I like, in Div learning can continue to progress!

PS: I am a beginner of Div, please do not laugh at the master. Puzzled this attribute has been very long, the information on the net mostly is not ideal, therefore writes these text oneself. This article for the local network studio original. Reprint please keep this studio link, the article starts: http://www.difangla.com/Html/jishu/css/88140.html)