<ul> <li>标记</li> </ul>的clearfix问题

Question

我使用clearfix清除浮动。但问题是，<li>和<div>的高度不同。 li.clearfix高度为32px，但div.clearfix高度为18px。当我删除.clearfix:before时，它们都是一样的。 但是，当在bootstrap中尝试时，它失败了。（我删除了bootstrap中的.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: table上的:before和:after伪元素来包含边距它是孩子，然后在clear: both元素上使用:after来清除它自己的浮动。这使我们可以在不需要额外标记的情况下应用clearfix。

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

li.clearfix:before {
    display: inline;
}

http://jsfiddle.net/72Nmy/

Answer 2

是否有任何理由将:after和:before设为display:table;而不是display:block;

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

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