Supplement to css floating clearance

Before I wrote about some methods to clear floating --- (http://www.cnblogs.com/qiwenke/archive/2012/10/07/2714434.html), recently in the process of learning and read a lot of good articles --- (such as http://www.iyunlu.com/view/css-xhtml/55.html )----

Therefore, when reviewing the previous articles, we found a lot of loopholes. I would like to add a simple supplement in the previous article as my study notes:

I,Take the original code as an example (as follows ):

<Div class = "container"> <div class = "block1"> child element 1 </div> <div class = "block2"> child element 2 </div> </ div>

.block1{ width:200px;              height:200px;          background: #CBA627;          float:left;          margin-right:10px;}.block2{ width:200px;              height:100px;          background:#009900;          float:left;}

(1)First, for the following method: after (that is, add a new style to the original style as follows ):

.container:after{ content:" 20";visibility:hidden;display:block;clear:both;height:0;}

There are two vague points. One is inaccurate understanding, not in-depth understanding, and the other is that margin-bottom may cause problems.

The first misunderstanding is inaccurate. It was previously called ". container: after" as a pseudo class. It should be a pseudo element. {Content: "20"; visibility: hidden; height: 0;} clearly indicates that this is. an element whose content is 20 is added at the end of the container. In order not to affect the hidden content of the parent element, the height is also set to 0 (in fact, it can be understood that a new "<div> 20 </div>" with a height of 0 is added at the end of the parent element "). {Clear: both; display: block;} adds the final clear attribute to the element and sets it to block. The final result of the entire style is equivalent to adding a "<div style =" clear: both; display: block; height: 0 "> 20 </div> ",. container: after refers to this "div ".

When the second margin-bottom will cause problems. when a floating sub-element ends with a floating sub-element and the floating sub-element has a margin-bottom value, the value of margin-bottom will expire in ie6/7/8. The solution is to cancel the: after method and replace it with the method of adding an empty label (clear: both.

(2)The method for clearing floating is too simple. The first is not comprehensive, but not in-depth.The reference article (http://www.iyunlu.com/view/css-xhtml/55.html) mentioned above, I think it is more in-depth to explain the floating problem, and the sorting and classification of the method is also reasonable. In particular, the methods are classified as "clear" and "closed ".

Clear:It is mainly implemented by adding an empty element (and ensuring that the element display: block; clear: both. In fact, the explanation of. container: after shows that this method is essentially to add elements to clear floating.

Closed:It means that, without adding additional elements or content, you can set the parent element. There is a way, as mentioned in the previous article, that is. container {overflow: hidden; zoom: 1}, but the reference article also mentions adding the display: table Method to the parent element and the overf: auto method.

To sum up, if examples are used to represent classification and classification methods, they should be shown as follows (based on html documents and css ):

Clear Class Method: 1. Add an empty Tag: <div class = "clear"> </div>. clear {clear: both ;}

Or <br class = "clear"/>. clear {clear: both ;}

2. use: after pseudo element :. container: after {content :". "; visibility: hidden; height: 0; display: block; clear: hidden ;}. container {zoom: 1} (to be compatible with ie6)

Closure method:1. Use overflow:. container {overflow: hidden; zoom: 1 ;}

Or. container {overflow: auto; zoom: 1 ;}

2. Use display:. container {display: table ;}

In addition, there is another method that does not classify it into any category, that is, adding a Floating Method to the parent element --- For example:. container {float: left ;}. This method will have a very bad impact on the document when the document structure is complex, so it is the least recommended and ignored.

II,

If there are many methods, we need to weigh and compare them and adopt the best solution. In fact, the advantages and disadvantages of the two "classes" are obvious.

Advantages of clearing methods: This method is simple and easy to use. Disadvantage: meaningless tag elements are added to the document.

Advantages of the closure method: it does not affect the html structure of the original document, and the writing is relatively simple. Disadvantage: Compatibility must be considered, and methods in this class will affect the style or document performance of the parent element.

Therefore, it is not recommended to use methods of the closure class. In turn, let's look at the pseudo-element method in the class method. It neither adds anything redundant nor changes the display or overflow of the parent element, but has an unknown impact on it, you only need to use zoom for compatibility. Therefore, this method is a good solution and is recommended. The pseudo-element method used in this article is a common method. This method has been optimized in the reference document mentioned in this Article. For more information, see.

 

III,

Note that the previous article mentioned the concept of haslayout, which is unique to ie. In fact, the second method to solve floating is related to this concept, and many bugs related to ie6 are also caused by this layout.

A detailed understanding of haslayout will give you a deeper understanding of a series of ie problems, especially ie6bug, and more solutions.

For more information about haslayout, see:

Http://www.cnblogs.com/qiwenke/articles/2714559.html

Http://www.cnblogs.com/qiwenke/articles/2714566.html

Http://www.iyunlu.com/view/css-xhtml/55.html