Question

我需要找到一种方法来清除一组浮动元素，而无需额外的标记。

例如，我在section#main_features中有一个2列网格。每个div.feature都有width: 50%且float: left。我想要的是找到一种方法来清除行没有额外的html标记（因为我想创建一个简单的语义网格）。

<section id="main_features">
  <div class="feature">
    ...
  </div>
  <div class="feature">
    ...
  </div>
  <div class="feature">
    ...
  </div>
  <div class="feature">
    ...
  </div>
</section>

请注意，这里的行只是一个“概念”（每行是两个.feature）。我正在使用语义方法来构建此网格，因此我不想需要包装每行的列然后clearfix这个包装器。我正在寻找一些技巧来清除修复并仅使用css - 或scss，less等来打破行。

这个问题似乎比它看起来更复杂。

提前致谢。

Answer 1

您可以使用css :after执行此操作，只需在其后面放置一个不可见的句号，即可强制执行明确修复。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

或者，我刚从Beau Smiths回答here

找到了这个新的

/* For modern browsers */
.container:before,
.container:after {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.container {
    zoom:1;
}

Answer 2

我一直在使用CSS Tricks上找到的语义group'微清除'。

.group:after {
  content: "";
  display: table;
  clear: both;
}

CSS类似于上述解决方案，但是概念是您可以将它添加到任何元素，您希望将它们“组合”在一起，然后是明确的。例如：

<header id="masthead" class="group">
  //content
</header>

以上链接也有子IE8规则。

编辑我很抱歉，我刚刚回答了问题的标题，没有正确阅读你的情景。在这种情况下，我会不使用浮动。相反，我喜欢像这样使用display: inline-block：

#main_features {
  font-size: 0; /* this resets the default padding created by the inline-block rule below */
  margin: -2%; /* offsets the positive margin below */
}

.feature {
  display: inline-block;
  vertical-align: top;
  width: 46%;
  margin: 2%; /* width + (2x margin) = 50%*/
  font-size: 12px; /* because it is reset to 0 by parent */
}

父元素上的字体设置为零，因为某些浏览器会向inline-block元素添加填充。父元素也有一个负余量来抵消其子元素。这允许内容与页面的其余部分对齐。

我做了一个基本的demo of this here。

Answer 3

如果您已将clearfix应用于类名和相应的选择器（.clearfix），那么您可以对选择器#main_features

执行相同操作

因此，如果您的正常clearfix样式声明如下所示：

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

...那么你可以通过这种方式添加到选择器来避免必须应用clearfix类：

.clearfix:after, #main_features:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;  }
*:first-child+html .clearfix, *:first-child+html #main_features { zoom: 1; } /* IE7 */

...然后按原样保留你的标记。

Answer 4

这是一个安静的老问题，但我在遇到类似问题时偶然发现了它。无论如何，我通过使用nth-child伪选择器来清除浮动容器中的每三个子项。

.main_features .feature:nth-child(3n) {
  clear: left;
}

如何在没有标记的情况下清除修复？

4 个答案: