Smart Clearfix to solve CSS floating problems

How to use clear to solve the CSS floating problem, should be a lot of front-end developers are concerned about the issue, is clear or clearfix, in fact, we finally a goal is to let the floating produce more impact, the most front-end personnel, we need in-depth research and discussion ...

Universal float closed, learned that many friends are using the following common solutions:

Clear{clear:both;height:0;overflow:hidden;}

The appeal method is to add a div.clear or br.clear where there is a need to clear the float, and we know that this will solve the basic problem of clear float. But the biggest drawback of this approach is that it changes the HTML structure, although it just adds a div.

Optimal floating closure scheme (this is our recommended):

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

clearfix{*+height:1%;}

The usage is simple, adding class= "Clearfix" to the parent cloud of the floating element. You will find this method has a disadvantage, but it is a small problem. Changing the CSS notation is OK:

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

clearfix{*+height:1%;}

The above notation avoids changing the HTML structure and solves it directly with CSS.
The floating closure method of the very pull:

clearfix{overflow:auto;_height:1%}

This method is I look at a foreign article to get the program, test, the hundred test is not good, really simple, very to force. Like the classmate can also try this method.

This method is provided by the end friend Radom, tested by:

Clearfix{overflow:hidden;_zoom:1;}

