What are the ways for clearfix to clear floats?

Today, I would like to share with you what are the relevant knowledge points about the method of removing floats in clearfix. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

There are two types of clearfix cleanup floats:

Clear its own float

Clear parent float

First, why to clear the float

If the height of a block-level element is not set height, then its height is supported by the child elements inside. If the child element uses a float, which is separated from the standard document flow, then the height of the parent element will be ignored. You can use firebug to check that if you do not clear the float, the height of the parent element will not be high enough, so that if you set border or background, it will not be parsed correctly.

Clear floats succinctly

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 clears floats:

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

Inline-block mode

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

This method will be a little different from the other methods above, mainly caused by inline-block.

These are all the contents of this article entitled "what are the ways to clear floats in clearfix?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.