How to use Clearfix to clear floating in CSS

First of all, many years ago we used to clear the float like this.

CSS code copy content to clipboard

. clear{clear:both;line-height:0;}

It is now possible to see such code on many old sites, and it is quite violent and effective in solving floating problems. But there is a fatal flaw in this usage, which is to add an empty label to use each time the float is cleared.

This approach if the page complex layout to often clear floating time will produce a lot of empty tags, added to the page useless tags, not conducive to page optimization. But I've found that the big Web site is still using this clear floating method. Interested students can search their home page for their. Blank0 this style name.

So there are a lot of great gods who have studied the Clearfix clear float method, directly solves the above flaw, does not need to add the empty label, directly in has the floating outer layer to add this style to be possible, this is also we to discuss today the Clearfix evolution history.

Origin

CSS code copy content to clipboard

. clearfix:after {

Visibility:hidden;

Display:block;

font-size:0;

Content: "";

Clear:both;

height:0;

}

. clearfix {Display:inline-table}

* HTML. Clearfix {height:1%} Hides from Ie-mac

. clearfix {Display:block} End Hide from Ie-mac

Explain the above code:

Apply the first declaration block to most compliant browsers to create an invisible block of content that clears the float for the target element.

The second article applies inline-table display properties for Clearfix, only for Ie/mac. Use * To hide some rules for Ie/mac:

height:1% is used to trigger the haslayout under IE6.

Re-apply block display properties to IE outside of Ie/mac.

The last row is used to end the hack for Ie/mac. (Do not feel very pit dad, Mac and IE)

The Origin code may also be very early time, and then the Mac under the IE5 also developed to IE6, the various browsers began to the standard of the consortium slowly come to the standards. So there's the following wording.

CSS code copy content to clipboard

. clearfix:after {

Visibility:hidden;

Display:block;

font-size:0;

Content: "";

Clear:both;

height:0;

}

* HTML. Clearfix {ZOOM:1}//* IE6 * *

*:first-child+html. Clearfix {zoom:1}/* IE7 *

IE6 and IE7 do not support: After this pseudo class, you need the following two to trigger the IE6/7 haslayout to clear the float. Fortunately IE8 support: after Pseudo class. So it only needs to target the IE6/7 hack.

Add a div package with the Clearfix attribute on the outer layer of a float property element to guarantee the height of the outer Div, which clears the issue of "floating elements not occupying space from the document stream, enclosing the picture and the text div".

Jeff Starr is here to IE6/7 with two statements to trigger the haslayout. I wonder why the author does not directly use the * to IE6/7 the zoom:1 or write it directly:

CSS code copy content to clipboard

. clearfix:after {

Visibility:hidden;

Display:block;

font-size:0;

Content: "";

Clear:both;

height:0;

}

. Clearfix{*zoom:1;}

But for many students this optimization level code is not enough to force, Clearfix developed to the present two final version.

Refactoring Clearfix Floating

There are several ways to make up the block formatting context:

The value of float is not none.

The value of the overflow is not visible.

Display values are Table-cell, table-caption, or any of the inline-block.

The value of the position is not relative and static.

Obviously, float and position are not suitable for our needs. You can only choose one from the overflow or display.

Because it's applied. Clearfix and. Menu menus are highly likely to be multilevel, so overflow:hidden or overflow:auto do not meet demand

(The Drop-down menu will be hidden or out of the scroll bar), then only from display.

We can set the display value of the. Clearfix to Table-cell, table-caption, inline-block any one of the

But Display:inline-block will produce extra blanks, so it is also ruled out.

The only remaining Table-cell, table-caption, to ensure compatibility can be used to display:table. Clearfix form a block formatting context

Because display:table will produce some anonymous boxes, one of these anonymous boxes (display value Table-cell) will form the block formatting context.

So our new. Clearfix will close the float of the inner element.

It was further improved by the following:

Ultimate Version One:

CSS code copy content to clipboard

. clearfix:after {

Content: "200B";

Display:block;

height:0;

Clear:both;

}

. clearfix {*zoom:1} /*ie/7/6*/

Explanation: Content: "200B"; this parameter, Unicode character character has a "0-width space", that is, u+200b, instead of the original ".", you can reduce the amount of code. And no longer uses Visibility:hidden.

Final Version II:

CSS code copy content to clipboard

. clearfix:before,.clearfix:after{

Content: "";

display:table;

}

. Clearfix:after{clear:both;}

. clearfix{

*zoom:1;/*ie/7/6*/

}

These two Ultimate version of the code are very concise, the ultimate version of one and two can be used, the above code has been tested, we hurriedly use it, if there are any problems please timely feedback with me, if you still stay in the Clearfix old code when you quickly update the code it.