html - 清除问题 标签

Question

我使用 clearfix 清除浮动。但问题是，<li>和中的高度不同<div>。li.clearfix高度是 32 像素，但div.clearfix高度是 18 像素。当我删除时.clearfix:before，它们都是一样的。但是，当在引导程序中尝试时，它失败了。（我.clearfix:before在引导程序中删除了，但高度仍然存在差异。）

<style>
.pull-left{
   float:left;
}
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style> 
<div class="clearfix">
    <div class="pull-left">Hello</div>
</div>
<ul>
    <li class="clearfix"><div class="pull-left">hello</div></li>
</ul>

演示：http: //jsfiddle.net/nevimop/p4HMS/

浏览器（chrome safari ie10，ff 没问题）

添加这个 ul{list-style: none;}高度相同。

Answer 1

Clearfix 用于强制浮动元素的父元素接收高度，它通过使用display: tableon:before和:after伪元素来包含其子元素的边距，然后使用clear: both元素:after来清除它自己的浮动元素。这使我们能够应用 clearfix 而无需额外的标记。

如果我们强制:before不使用伪元素display: table而是使用，display: inline我们可以解决您不必要的空白问题。

li.clearfix:before {
    display: inline;
}

http://jsfiddle.net/72Nmy/

Answer 2

你有什么理由设置:afterand :beforeasdisplay:table;而不是display:block;

像这样的东西：http: //jsfiddle.net/N6sG7/3/

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
  display:block;
  height:0;
}