Clever clearfix solves css floating problem

How to use clear to solve the css floating problem should be a question that many front-end developers are concerned about. Is it clear or clearfix? In fact, our ultimate goal is to make floating have more impact. As a front-end staff, we need to study it in depth. And discuss...

Universal float closure, I learned that many friends are using the following general solution:

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

The appeal method is where the float needs to be cleared Add a div.clear or br.clear, we know this can solve the basic clear floating problem. But the biggest flaw of this method is that it changes the html structure, although it just adds a div.

The optimal floating closure solution (this is what we recommend):

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

clearfix{* +height:1%;}

Usage is very simple, add class="clearfix" to the parent element of the floating element. You will find that this method also has a drawback, but it is indeed a small problem. Just change the css writing method and it will be ok:

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

clearfix{*+height:1%;}

The above writing method avoids changing the html structure and solves it directly with css.
A very impressive floating closure method:

clearfix{overflow:auto;_height:1%}

This method is a solution I got from reading an article abroad. I tested it and it works well every time. It’s true. Very simple and very powerful. Students who like it can also try this method.

This method is provided by Duanyou radom, and the test passed:

clearfix{overflow:hidden;_zoom:1;}