html - <ul> <li> 标签的 clearfix 问题

Question

我使用 clearfix 来清除 float 。但问题是，<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 用于强制 float 元素的父级接收高度，它通过在 :before 和 上使用 display: table 来实现:after 伪元素包含它的子元素的边距，然后在 :after 元素上使用 clear: both 来清除它自己的 float 。这使我们能够在不需要额外标记的情况下应用 clearfix。

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

li.clearfix:before {
    display: inline;
}

http://jsfiddle.net/72Nmy/