“Best clearfix ever？” [英] "Best clearfix ever?"

问题描述

我在这里看到这种不同的clearfix方法： http：// www .marcwatts.com.au / blog / best-clearfix-ever /

I saw this rather different method for clearfix here: http://www.marcwatts.com.au/blog/best-clearfix-ever/

它建议添加以下CSS代码，自动化clearfix，不要求您

It proposes adding the following CSS code which automates clearfix and does not require you to add a 'clearfix' or similar class to the elements you want to clear.

/* our Global CSS file */
article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }

/* our ie CSS file */
article { zoom:1; }
aside { zoom:1; }
div { zoom:1; }
footer { zoom:1; }
form { zoom:1; }
header { zoom:1; }
nav { zoom:1; }
section { zoom:1; }
ul { zoom:1; }

这个方法有什么缺点吗？这可能会结束clearfix的元素，你可能不一定需要clearfix'ed？

Are there any disadvantages to this method? Could this end up clearfix'ing elements that you may not necessarily want clearfix'ed? Or are the rules such that this will account for any situation?

推荐答案

我认为这是一个坏主意。你真的要相信一个人似乎忘了这样做：

I think that's a bad idea. Are you really going to trust somebody who seemingly forgot to do this:

article, aside, div, footer, form, header, nav, section, ul { zoom:1; }

清除浮动不是一件复杂的事情。

Clearing floats is not a complicated thing to get right.

它应该根据具体情况处理，而不是 sledge-hammered 到每个元素。

It should be handled on a case-by-case basis, not sledge-hammered onto "every" element.

有一件事，我同意@

一个边缘案件的原因涉及IE7： http://www.satzansatz.de/cssd/onhavinglayout.html

An edge case reason against it concerns IE7: http://www.satzansatz.de/cssd/onhavinglayout.html

缩放：1 是一种常见的方法，向元素提供 hasLayout 。将 hasLayout 应用到元素可修复某些类型的呈现问题，但也可能会导致其他问题。链接文档中的报价：

zoom: 1 is a common method to provide something known as hasLayout to elements. Applying hasLayout to an element fixes certain kinds of rendering problems, but it can also cause other problems. A quote from the linked document:

不要给所有的布局。

Don't give layout to all. Poison in that concentration, having layout is not the cure, it changes the rendering fundamentally.

---

b
$ b

我个人喜欢使用 overflow：hidden 方法来包含浮动。当无法使用时，我使用clearfix。

---

I personally like to use the overflow: hidden method to contain floats. When that doesn't work, then I use clearfix.

您应该使用 http://html5boilerplate.com/\">的clearfix版本：

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

这篇关于“Best clearfix ever？”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！