There are many ways to clear floats, what are the differences between them?

When we write pages, we often have some small problems that require us to clear floats. So how to clear floats? What are the methods? Let’s discuss it with you next.

clearfix There are two types of clearing floats:

Clearing own floats

Clearing parent floats

1. Why should we clear floats

If the height of a block-level element is not set, then its height is supported by the child elements inside. If the child element uses floating and breaks away from the standard document flow, then the height of the parent element It will be ignored. You can use firebug to check that if the float is not cleared, the height of the parent element will be insufficient. In this case, if the border or background is set, it will not be correctly parsed.

Concise clear float

clearfix1:before,.clearfix1:after{    content: "";    display: table; }
.clearfix1:after{    clear: both;    overflow: hidden; }
.clearfix1{    zoom: 1; }

Classic clear float:

.clearfix2:after {    visibility: hidden;    display: block;    font-size: 0;    content: " ";   
 clear: both;    height: 0; } * html 
 .clearfix2     { zoom: 1; } /* IE6 */*:first-child+html .clearfix2 { zoom: 1; } /* IE7 */

overflow clear Floating:

/* overflow:auto */#demo3{    overflow:auto;*zoom:1; }/*或 overflow:hidden */#demo4{    overflow:hidden;*zoom:1; }

inline-block method

#demo5{    display:inline-block;*display:inline;*zoom:1; }

This method will be slightly different from the other methods above, mainly due to inline-block .

The above is the detailed content of There are many ways to clear floats, what are the differences between them?. For more information, please follow other related articles on the PHP Chinese website!