CSS float and css float

CSS float and css float
Waiting for sorting

 

Http://www.geekplux.com/2014/04/25/several_core_concepts_of_css.html

CSS floating clearance

Clear is defined between sub-modules, as follows:
<Div id = "a">
<Div id = "1"> </div>
<Div id = "2"> </div>
</Div>
Between 1 and 2, Use clear to limit.
Overflow: hidden is used by the parent module to submodules. It is a limitation of Module 1 and module 2.
Clear is very easy to understand. It mainly involves overflow: hidden is not so easy to understand. I will send you an article to show you what it means after reading this article. (This is the most thorough article I have read)

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, on the display side, it is already out of the wai div. That is to say, what is the width and height of nei at this time, it does not work for the isolated wai. The metaphor for an image is that when JJ leaves BB, the size of JJ does not play a major role in BB (it is not suitable for children-_-|)

OK. When we fully understand the meaning of the word floating, we will understand overflow: hidden... the rest of the text>

How to clear div + css float?

1. Clear the floating div without a height by default, unless you have set the height. In the editing window, the software shows you the existence of a div, and the code remains unchanged.

2. if you want to clear floating in a format similar to <div class = "clear: both"> </div>, then you 'd better place this div behind the same-level elements with floating attributes (for example, your code is li. However, the next level of ul can only be li, so you can write it as follows: <li style = "clear: both; height: 0; visibility: hidden"> </li> ); if overflow: auto is used, this setting should be placed in the parent container with floating attribute elements (such as your ul ), in addition, this method can clear the float in non-ie and ie7 + browsers and is invalid for ie6, so you should write zoom: 1 in the settings, and use of pseudo objects (: after ). There are a lot of details about how to clear the float and the nature of the float. I hope you can check it out. Understanding more, then you will truly understand its inner and be able to control it.