Clearfix Clear Float

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

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

Now it may be possible to see such code on many old sites, which is quite violent and effective in solving floating problems. But this usage has a fatal injury, that is, each time you clear the float, you need to add an empty tag to use.

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

So there are a lot of great gods to study the Clearfix clear floating method, directly solve the above defects, do not need to add empty tags, directly in the floating layer with this style can be, this is what we will discuss today Clearfix evolutionary history.

Origin

123456789101112

.clearfix:after {     visibility: hidden;     display: block;     font-size: 0;     content: " ";     clear: both;     height: 0; } .clearfix { display: inline-table; } * html .clearfix { height: 1%; }//Hides <span id="7_nwp" style="width: auto; height: auto; float: none;"><a id="7_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=20&is_app=0&jk=7d850eb6b064af0a&k=from&k0=from&kdi0=0&luki=2&mcpm=0&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=aaf64b0b60e857d&ssp2=1&stid=9&t=tpclicked3_hc&td=1922429&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6259%2Ehtml&urlid=0" target="_blank" mpid="7" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">from</span></a></span> IE-<span id="8_nwp" style="width: auto; height: auto; float: none;"><a id="8_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=20&is_app=0&jk=7d850eb6b064af0a&k=mac&k0=mac&kdi0=0&luki=5&mcpm=0&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=aaf64b0b60e857d&ssp2=1&stid=9&t=tpclicked3_hc&td=1922429&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6259%2Ehtml&urlid=0" target="_blank" mpid="8" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">mac</span></a></span> .clearfix { display: block; }//End hide from IE-mac

Explain the above code:

• The first declaration block is applied to most standards-compliant browsers to create an empty block of invisible content to clear the float for the target element.
• The second applies inline-table display properties for Clearfix, only for Ie/mac. Use * To hide some rules from Ie/mac:
• The height:1% is used to trigger the haslayout under IE6.

• Re-apply the block display property to IE outside of Ie/mac .

• The last line is used to end the hack for Ie/mac. (Do you think it's a pit daddy, Mac and IE)

The Origin code may also be very early time, and then back to the Mac under the IE5 also developed to IE6, various browsers began to the web of this standard slowly on the line. So the following is the wording of the present.

12345678910

.clearfix:after {     visibility: hidden;     display: block;     font-size: 0;     content: " ";     clear: both;     height: 0; } * <span id="5_nwp" style="width: auto; height: auto; float: none;"><a id="5_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=20&is_app=0&jk=7d850eb6b064af0a&k=html&k0=html&kdi0=0&luki=7&mcpm=0&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=aaf64b0b60e857d&ssp2=1&stid=9&t=tpclicked3_hc&td=1922429&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6259%2Ehtml&urlid=0" target="_blank" mpid="5" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">html</span></a></span> .clearfix { zoom: 1; } /* IE6 */*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Both IE6 and IE7 do not support: After this pseudo-class, the following two are required to trigger the haslayout of IE6/7 to clear the float. Fortunately, IE8 supports: after Pseudo-class. So only the hack for IE6/7 is needed.

Adding a div package with the Clearfix attribute to the outer layer of a float property element guarantees the height of the outer Div, which clears the question of "floating elements out of the flow of the document and the div that surrounds the picture and text does not occupy space".

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

123456789

.clearfix:after {     visibility: hidden;     display: block;     font-size: 0;     content: " ";     clear: both;     height: 0; } .clearfix{*zoom:1;}

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

Refactoring Clearfix Floating

There are several ways to make block formatting context:

The value of float is not none.

The value of the overflow is not visible.

The value of display is Table-cell, table-caption, any of the inline-block.

The value of position is not relative and static.

It is clear that float and position are not suitable for our needs. That can only be selected from the overflow or display.

Because it is applied. Clearfix and. Menu menus are highly likely to be multilevel, so overflow:hidden or Overflow:auto do not meet the requirements

(The drop-down menu is hidden or scrolled), so you can only start with display.

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

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

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

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

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

This was further improved by the following:

　　Ultimate Edition One:

1234567

.clearfix:after {     content:"\200B";     display:<span id="3_nwp" style="width: auto; height: auto; float: none;"><a id="3_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=20&is_app=0&jk=7d850eb6b064af0a&k=block&k0=block&kdi0=0&luki=8&mcpm=0&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=aaf64b0b60e857d&ssp2=1&stid=9&t=tpclicked3_hc&td=1922429&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6259%2Ehtml&urlid=0" target="_blank" mpid="3" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">block</span></a></span>;     height:0;     clear:both; } .clearfix {*zoom:1;}/*IE/7/6*/

Explanation: Content: "\200b"; this parameter, the 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 use Visibility:hidden.

　　Ultimate Edition II:

12345678

.clearfix:before,.clearfix : after{      content :      display :table; } .clearfix:after{ clear : both ; .clearfix{      *zoom: 1 ; /*ie/7/6*/ }

The 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 is any problem please timely feedback with me, if you still stay in the old code of Clearfix the time to quickly update the code bar.

Clearfix Clear Float