One, what is. clearfix
As long as you go to Google or Baidu casually search "css clear floating", you will find that many sites have said "box to clear the internal float can be used." Clearfix.
| The code is as follows | Copy Code |
| . clearfix:after { Content: ""; Display:block; Clear:both; height:0; } . clearfix { Zoom:1; } <div class= "Clearfix" > <div class= "floated" ></div> </div> |
|
The code above is the definition and application of clearfix, simply to say. The principle of Clearfix:
1, in IE6, 7 under the zoom:1 will trigger the haslayout, so that the element closed the internal float.
2, in the standard browser,. Clearfix:after this pseudo class inserts a Clear:both block-level element after the element applied to the. Clearfix, thereby eliminating the floating effect.
| The code is as follows | Copy Code |
| <div> <div class= "floated" ></div> </div> <div style= "Clear:both" ></div> |
|
Ii. the drawbacks of Clearfix
In the above code can be seen, put aside IE6, 7 do not talk,. Clearfix inserts a CLEAR:BOTH element in a standard browser, which is likely to eliminate unwanted fluctuations. For example, Ming:
| The code is as follows | Copy Code |
| <! DOCTYPE html> <title>Demo</title> <style type= "Text/css" > HTML, body {padding:0; margin:0;} UL {margin:0; padding:0;} . clearfix:after { Content: ""; Display:block; Clear:both; height:0; } . clearfix { Zoom:1; } . left-col { background:red; Float:left; width:100px; height:300px; } . right-col { margin-left:100px; } . menu { border:1px solid #000; } . menu Li { Float:left; Display:block; padding:0 1em; margin:0 1em 0 0; Background: #ccc; } . placeholder { Background:yellow; height:400px; } </style> <body> <div class= "Left-col" > </div> <div class= "Right-col" > <ul class= "Menu" > <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> <div class= "placeholder" ></div> </div> </body> |
|
The code above forms a two-column layout page. Note that the menu has a border set, but because the LI element of. Menu is floating left, the. Menu has no height, so you can use. Clearfix to clear the float within the. menu. The code is as follows:
| The code is as follows | Copy Code |
| <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> |
|
But after the application. Clearfix, the page becomes messy in standard browsers because. Clearfix:after the floating of left-col.
Third, refactoring. Clearfix
After encountering the above error, analyze it except. Clearfix:after this way there is no other way to clear the float inside the element. The answer is yes, in the vernacular block formatting contexts this article mentions the elements that make up the block formatting context can clear the floating of internal elements. So just make the. Clearfix form block Formatting the context is good. 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 likely to be multi-level, so overflow:hidden or Overflow:auto do not meet the demand (the Drop-down menu will be hidden or out of the scroll), then only from display.
We can set the display value of the. Clearfix to be either Table-cell, table-caption, or any of the inline-block, but the display:inline-block will produce extra blanks, so it is also ruled out. All that remains is Table-cell, table-caption, to ensure that compatibility can be display:table. Clearfix form a block-formatting context because display: Table produces anonymous boxes, one of which (display value Table-cell) forms the block formatting context. So our new. Clearfix will close the float of the inner element. Here is the. Clearfix after refactoring.
| The code is as follows | Copy Code |
| . clearfix { Zoom:1; display:table; } |
|
Four, summary
In IE6, 7 can clear the internal float as long as it triggers the haslayout element. There are a lot of ways to clear the inside of an element within a standard browser, except for. Clearfix:after this way, the rest of the method is to produce a new block-formatting context to achieve the goal. If you can do under what conditions in what way, I think this is enough ...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
