To talk about clearing floating

Clearing floats is basic to any csser, but I don't want to call it a base, because I've recently browsed the web to see a variety of ways to clean up the float before I fully understand that although various methods have been used extensively, they have been quite confusing. Worst of all, many problematic versions of the search rankings are very much in the front, in the words of God's Lord: "The wrong knowledge is meaningless."

However, there are many ways to spread the word is not a mistake, but only a few deviations-often use will not have problems, but strictly speaking, they are inaccurate, we do not have the technology should be rigorous a little bit. So, with a slightly complicated mood, trying to "talk" with what I know to clear the float. Although I do not know how many people can see this article, but occasionally I still want to spit--"That's wrong." ”

Now that Google's visit in my town is really tough, so I have to use Baidu as an example. If using Baidu search "clear float", in the result can see a variety of explanations. Baidu Library even plagiarized some slightly wrong articles and made an outstanding contribution to the dissemination of inaccurate information. Clear float not out of these three ways: empty label clears floating overflow pseudo element after

Here skip the first way, the exact interpretation of the latter two ways, I recommend the blue ideal yoom Moderator write Wiki page: Clear float. Then let's take a closer look at where the bias is on the web. Careful with overflow

Although most articles may have an introduction to overflow's ability to clear floats, few of them describe the drawbacks of overflow, making the following clear floating code widely available on the web today:

. clearfix{overflow:auto;zoom:1;}
/* or
/* CLEARFIX{OVERFLOW:HIDDEN;ZOOM:1;}

Seemingly no problem, but there are hidden dangers, because not all cases are applicable. More than 1 years ago, I discussed the general flow and related concepts in one of the CSS positioning mechanisms: The general streaming article: formatting contexts. setting overflow to a visible value will cause the container to generate a new format context, with a significant change in layout, relative to the behavior of the float, and clearing the float is only one of the side effects of this series of changes .

For this reason, we can see more abuses, whether it was the previous Firefox generated focus, or in some cases triggered the scroll bar, truncated absolute positioning of the layer, and so on, and so on, too much. The kind of discussion I saw this year was enough to keep me at a respectful distance.

Should always understand, if pure to clear float, why to use affect the entire layout of the overflow it. My personal view is that if only to clear the floating,overflow should be decisive not to use , "careful use" is only a euphemism, because after all, sometimes overflow is necessary.

So I think any introduction to floating articles must mention overflow, as well as the reasons for their abandonment. the attention point of after pseudo element

Using pseudo elements to clear floats is a recommended practice, while deviations are also present. First, pseudo elements and pseudo classes are two completely different concepts, and most people confuse them. Can see in many articles "after pseudo class" such a deviation of information, although this is only a small problem does not affect the understanding and use, but I really do not want to see the spread of the wrong concept.

Then it's about the actual problem.

The method of clearing the float using the after pseudo element is derived from this way to clear floats without structural Markup, and if you take all the code, it should be:

<style type= "Text/css" >

  clearfix:after {
    content: ".";
    Display:block;
    height:0;
    Clear:both;
    Visibility:hidden
    }

. Clearfix {display:inline-block;}  /* for IE/MAC/*

</style><!--main stylesheet ends, CC with new stylesheet below ...-->

<!--[if IE ]>  
<style type= "Text/css" >  
  clearfix {
    zoom:1;     /* Triggers haslayout * *
    display:block;     /* Resets display for Ie/win * * * only  IE can, inside the conditional comment and
    read this CSS rule. Don ' t ever use a normal HTML
    comment inside the CC or it'll close prematurely. */
</style>  
<![ Endif]-->  

Given the scarcity of Mac version ie to negligible occupancy and validation problems, the code can be simplified to the following:

. Clearfix:after{content: "."; Display:block;height:0;clear:both;visibility:hidden}
. Clearfix{*zoom:1;}

The above code that we are familiar with: After pseudo element content is a point that itself is used to clear the float, the other code is to make this pseudo element invisible. So in many other versions, font-size:0;line-height:0 may also be added; To further ensure that elements are not visible. and zoom:1; is used to trigger the IE6/7 haslayout. This version is not rigorous, because there is no care for IE6/7 alone and only rudely release a zoom:1 to send them. But the code is accurate, on this basis, there is the online spread of the deviation, I am free to extract a paragraph:

The content attribute is required, but its value can be null, and the blue Ideal discusses the method when the value of the Content property is set to ".", but I find it is ok to be empty.

Unfortunately, the content in this code is empty is not appropriate. The original code was content to avoid the extra space created by Firefox when using content: "". And whether it's a space or an empty string, Firefox still has a problem with 7.0 until now. So content is a must. The demo code that simply gives Firefox extra space is as follows:

<! DOCTYPE html>  
 
Of course this doesn't happen in most cases, which makes the code bias invisible. But it can cause problems in certain situations. Although I later looked at the definition of the content and its value string, the standard does not have a detailed description of the relevant case.

However, this code is not entirely without improvement, although the following improvements are not widely used so there is not enough evidence to prove their rigor, but at least I think it is more reliable than simply removing content. Improved version one

The Unicode character character has a "0-width space", that is, the u+200b , which replaces the content "point" of the contents by using this character, which reduces the amount of code-because the character itself is invisible, so no longer has to be reused Visibility:hidden ; To hide it. The code then becomes the following:

. Clearfix:after{clear:both;content: "\200b";d isplay:block;height:0;
Clearfix{*zoom:1;}
 
It looks a lot fresher, isn't it? Improved version two

A new micro Clearfix hack refers to a novel after pseudo element that clears the float, sets the content to null, and changes the display value to table:

/* For modern browsers/*
Clearfix:before,
. clearfix:after {
    content: ";
    Display:table
}

. clearfix:after {
    clear:both;
}

* For IE 6/7 (trigger haslayout)/*
clearfix{
    zoom:1;

 
Note that the code also includes part of the top "anti-white edge folding" code. This code works well, and there are no previous problems with Firefox. Summary

Although it is only a floating clear, but also leads to so many things. For normal use, I prefer the old version of the pseudo element code, which is widely more reliable and better proved to be true, although the improvement may look much more crisp.

Finally, gossip, the CSS3 selector component and the CSS3 namespace component "Yesterday" officially became the official recommended standard for the consortium, thus becoming the second and third CSS3 recommended standard components following the CSS3 color component. Welcome to congratulate. It was written "Yesterday" because I wrote this article for two days ...

Welcome to all kinds of comments, of course, because my personal level is limited, there must be some improper place, welcome to correct. Kwai Zhong Jian

Share this post