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”？

Answer 1

您可能只需要这样做：

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

clearfix不是必需的。

Answer 2

使用css你可以简单地使用after psudeo

.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文件之外

编辑：对不起！由于某种原因，今晚添加评论按钮或upvote按钮对我不起作用。

附上我的答案以回答你的另一个问题：

你说的twitter引导程序使用.clearfix类，它类似于我在下面提供的css，但是它们的方法需要添加到元素中，即：“element class =”clearfix“或者类似，其中css pseduo是我们不需要在文档中添加这些额外的代码。请注意，并非所有浏览器都支持css pseduo。

Twitter Bootstrap中这个CSS的等价物是什么？

2 个答案: