Finishing the most complete CSS clearfix to clear the floating method

CSS often use clearfix clear floating, the author listed a few clearfix different ways of using the comparison, the need for friends can refer to the following CSS Clearfix clear floating method.(Why does the CSS need to clear floating (float)?) What is the principle of clear float?)

One, what is. clearfix

You just go to Google or Baidu casually search "css clear floating", you will find a lot of sites are said to "box clear internal floating can use. Clearfix".

. clearfix:after {  content: "";  Display:block;  Clear:both;  height:0;}. Clearfix {  zoom:1;} <p class= "Clearfix" >  <p class= "floated" ></p></p>

The above code is the. Clearfix definition and application, simply say. Clearfix principle:

1, in IE6, 7 zoom:1 will trigger the haslayout, so that the element closed inside the float.

2, under the standard browser,. Clearfix:after this pseudo-class inserts a Clear:both block-level element after the element applied to the. Clearfix to clear the float.

<p>  <p class= "floated" ></p></p><p style= "Clear:both" ></p>

Second, the disadvantages of Clearfix.

As can be seen in the above code, aside from IE6, 7 does not talk about,. Clearfix inserts a CLEAR:BOTH element under a standard browser, which is likely to clear out unnecessary floats. For example:

<! DOCTYPE html>
The above code forms a two-column layout page. Note. Menu This menu sets the border, but because the LI element of the. Menu is left floating, causing. Menu has no height, so you can use the. Clearfix to clear the float inside the menu. The code is as follows:

<ul class= "Menu Clearfix" >  <li>menu item</li> <li>menu item</li>  <li >menu item</li>  <li>menu item</li>  <li>menu item</li>  <li>Menu Item</li></ul>
However, after the application. Clearfix, the page in the standard browser becomes messy, because. Clearfix:after the floating of the. Left-col is removed.

Third, refactor. Clearfix

After encountering the above error, analyze it besides. Clearfix:after this way there is no other way to clear the float inside the element. The answer is, in the vernacular block formatting contexts this article mentions that the elements that make up the block formatting context can clear the floating of inner elements. So just make the. Clearfix form block formatting context just fine. 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 multi-level, so Overflow:hidden or Overflow:auto also do not meet the requirements (the dropdown 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, any of the inline-block, but Display:inline-block will produce extra whitespace, so it is also excluded. 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 Table-cell) will form a block formatting Context. So our new. Clearfix will close the float of the inner element. The following is the. Clearfix after refactoring.

. clearfix {  zoom:1;  display:table;  width:100%;}
Four, summary

In IE6, 7, the haslayout element can be cleared to clear the inner float as long as it is triggered. There are many ways to clear elements inside a standard browser, except for. Clearfix:after this way, the rest of the method is simply to generate a new block formatting context to achieve the goal. If I can do it under what conditions, I think that's enough ...

For more information on how CSS clearfix clear floating, please follow the PHP Chinese web

Related articles:

Deep parse Clearfix Clear float

The use of CSS clearfix in-depth understanding

A brief introduction to the use of CSS to clear floating clearfix and clear

CSS about Clearfix Clear Floating method

