这个 CSS 在 Twitter Bootstrap 中的等效是什么？

Question

<div style="float:left;">
    column 1
</div>
<div style="float:left;">
    column 2
</div>
<div style="clear:both;"></div>

我习惯于写 clear:both。但是我在 Twitter Bootstrap 中听说有一种叫做“clearfix”的东西？在哪个元素上应该/可以应用“clearfix”？

- user847495

---

我对 Twitter Bootstrap 毫无头绪，但我看到的每个 .clearfix 实现都是应用你现在正在做的完全相同。只需用 <div class="clearfix"></div> 代替即可。 - Ry-

我一直在思考这个问题。就我个人而言，我认为这是一个“有意”的省略。 :) 这是一个建议，即div是否清除浮动不是标记的关注点，而是类的关注点。例如，navbar-inner清除。您可以使用Bootstrap mixin .clearfix()使小部件清除。但这只是一个猜测，这就是为什么我不想在下面给出答案的原因。 - Craig Celeste

Answer 1

你可能只需要做这个:

<div class="container">
   <div class="row">
      <div class="span6">column 1</div>
      <div class="span6">column 2</div>
   </div>
</div>

clearfix不应该是必需的。

- artlung

---

接近正确，但是clearfix类需要放在div.container上面。这是必要的，以便适当地清除任何跟随在div.container之后的divs。 - Michael Irwin

@MichaelIrwin 我并不完全认为这是必要的，但我目前对Bootstrap的经验还不够丰富。 - artlung

请注意，我已更新此答案以考虑 Twitter Bootstrap 更改为 12 列并更正我的答案。 - artlung

Answer 2

使用CSS，您可以简单地使用after伪元素。

.class1:after, .class2:after //append as many as you like
{
 clear:both;
 *zoom:1;
 height:0;
 visibility: hidden;
 display:block;
}

alternative(providing children are not using the position selector)
(parent-elemts){overflow:hidden;}//bit of a quick fix!

保持不需要的标记远离您的HTML文件

编辑：抱歉！由于某种原因，今晚的添加评论按钮或点赞按钮对我来说无法使用。

为了附加我的答案以回答您的另一个问题：

Twitter的Bootstrap使用.clearfix类，类似于我在下面提供的CSS，但是他们的方法需要添加到元素中，即：“element class =“clearfix”或类似内容，而我们不需要将这些额外的代码添加到我们的文档中。请注意，不是所有浏览器都支持CSS伪元素。

- Philip