1

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

例如，我有一个 2 列网格section#main_features。每个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）。我正在使用语义方法来构建这个网格，因此我不想包装每一行的列，然后清除这个包装器。我正在寻找一些技巧来清除并仅使用 css - 或 scss，less 等来打破行。

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

提前致谢。

4

4 回答 4

3

我一直在使用group我在CSS Tricks上找到的语义“micro clearfix” 。

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

CSS 与上述解决方案类似，但其概念是您可以将其添加到您希望“组合”在一起的任何元素中，并在后面加上一个 clear。例如：

<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元素添加填充。父元素也有一个负边距以抵消其子元素的边距。这允许内容与页面的其余部分对齐。

我在这里做了一个基本的演示。

于 2013-02-14T13:01:28.193 回答
3

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

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

或者，我刚刚从 Beau Smiths 的答案中找到了这个较新的答案

/* For modern browsers */
.container:before,
.container:after {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.container {
    zoom:1;
}
于 2013-02-14T12:00:14.297 回答
0

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

.main_features .feature:nth-child(3n) {
  clear: left;
}
于 2015-02-24T07:29:12.197 回答
0

如果您一直在使用类名和适当的选择器（.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 */

...并保持您的标记原样。

于 2013-02-14T12:10:28.750 回答