One of the best floating clearing solutions is recommended.

One of the best floating clearing solutions is recommended.

For the ever-changing WEB development technology and browser update frequency, clearing floating is already a chunking topic. It is said that these years have passed, and the float still has to clear floating labels and css code. Why can't W3C take some time to correct this annoying little detail after studying html5 all day? Complaints come from complaints. If you have to eat meals and earn money, you cannot stop clearing the float.

It is already the most stable and simple way to clear the floating and add silent code, but it is always uncomfortable for developers. After all, they have been used to the separation of structures and styles for so many years, you have to insert such a line of non-semantic code in the structure, which makes people feel difficult to grasp.

It is not easy to clear the float through css code. Just the various css hack caused by the current share of multiple browsers is a headache, in addition, there is not much difference between different versions of those browsers. It is still a long-term process to clear floating through css, because you still need to expect that the next browser will not explain the floating modification to the html code.

It should be said that in the current bad situation, it is best to choose which method to clear the floating state. If this is the case, it depends on your opinions.

Most of the time, when developers encounter problems in front-end development, they will find large websites that use similar technologies to analyze their solutions and then use them on their own websites, I can't even think about why. I also often do this. Specifically, to solve the floating problem, I used the non-semantic labeling method only when I saw a large website using it.

But I mentioned this again today because I saw different solutions on a large website. They do this:

<Style>. clearfix: after {visibility: hidden; display: block; font-size: 0; content :". "; clear: both; height: 0;} * html. clearfix {zoom: 1;} *: first-child + html. clearfix {zoom: 1 ;}</style> <div class = "clearfix" style = "border: 2px solid red;"> <div style = "float: left; width: 80px; height: 80px; border: 1px solid blue; "> web Front-end technology </div>

Although this is from a large website, it has a high level of trust and can be used directly without thinking about it, but the learning attitude still needs to be available. Let's analyze the principles in this article.

The first is to use the: after pseudo-class to be compatible with browsers that support this standard. FF and Chrome naturally belong to the ranks of browsers that strongly support this standard. However, since IE began breeding to the eighth generation, this pseudo class is also supported. : The after pseudo class is used with the content attribute to set the content after the object.

If we don't look at it for 2012 now, but 10 years later, we may not have to talk about it any more. However, because IE6 and IE7 are still very powerful, we have to take good care of them. : The after pseudo-class IE is not supported. It is used with the content attribute to use the content after the object. For example:

.clearfix:after {content:".";}

This CSS will add an English ending after the text in the clearfix class label.

"* Html" is recognized only by IE6. Therefore, you can set the zoom attribute "zoom: 1;" to ensure compatibility with IE6 ;"*: first-child + html "This selector can only be identified by IE7. Therefore, you can set the zoom attribute" zoom: 1; "to implement IE7 compatibility.

The principle analysis is complete. The method is feasible, and the perfect solution is impossible. Therefore, the float in the W3 standard remains unchanged for one day.