Summary of methods to clear floating floats

Abandon those useless methods and just remember the most practical method!

Add an additional class attribute to the parent element that needs to clear floating: clearfix! ! !

The style is as follows:

.clearfix:after{
content:".";
display:block; # Current projects have almost completely ignored it)
.clearfix{
zoom:1
}

Clearing floats is so simple and can be used as a public style common.css, every page can be called directly!

Simple example application:

　

　　 //sth

　

　

"> ;　　　//sth

　

Why do we need to clear floats:

1 .When I was writing before, I would find that the pages were messed up as I wrote them, and there were also overlaps? It’s the floating that’s to blame!

2. When the child element under the parent element floats, the parent height value may be 0; therefore, after using float, immediately add clearfix to the parent to completely eliminate the problems caused by float. All kinds of weird questions!

The above is the detailed content of Summary of methods to clear floating floats. For more information, please follow other related articles on the PHP Chinese website!