Before I introduced you to two floating closure methods, CSS clears the floating universal float closure . I learned that many students are using the following ashes-level solutions:
.clear{clear:both;height:0;overflow:hidden;}
The way to appeal is to add a div.clear or br.clear to the place where the float needs to be cleared. We know that this can solve the problem of basically clearing the float.
But the biggest flaw of this method is that it changes the html structure, although only a div is added.
Optimal floating closure scheme (this is what we recommend):
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
The usage is very simple, add class="demo clearfix" to the parent element of the floating element.
You will find that this approach also has drawbacks, but it is indeed a small problem. It's ok to change the css writing:
.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.demo,.demo2{*+height:1%;}
The above writing method avoids changing the html structure and solves it directly with css.
Very annoying floating closure method:
.clearfix{overflow:auto;_height:1%}
This method is the solution I got by reading an article abroad. I have tested it, and it is not satisfactory. It is really simple and powerful. Favorite students can also try this method.
This method is provided by Duanyou Radom, and the test passes:
.clearfix{overflow:hidden;_zoom:1;}
Thanks radom for this method! !
If this article is helpful to you, you can tip me
Technical exchange QQ group: 15129679