浮动元素如何影响其高度/显示？

Question

这是我今天发现的一个错误，并且正在困扰我一段时间。我终于解决了这个问题，但我很好奇这是怎么发生的，为什么会发生这种情况，并且知道是否有更好的解决方案（我确信有）：

我创建了一个使用无序列表的菜单，我想要在其右侧显示一个计数器的列表项（内部为白色数字的红色泡泡形式）。

经过编码后，我在链接名称旁边看到了红色的气泡，但是当我将它飘向右侧时，气泡扩大占据了父项高度的100％并且实际影响了它的高度（取消注释/*float:right;*/代码见下面）。红色泡泡不应该在保持其方面的同时漂浮在右边吗？它看起来像display:inline-block或height:100%（或两者）正在应用。

我试着用不同的值设置display和height和!important但似乎没有任何工作。我最终通过添加line-height:16px并添加了margin-top:10px来解决问题。但我不是这个解决方案的忠实粉丝，因为它取决于将来可能改变的菜单高度（我怀疑它，但它可能会发生）。有没有更好的解决方案来做到这一点？

你可以看到这里的代码：（而这个链接http://jsfiddle.net/9nw2zu7y/上）

* { 
 
    border: 0px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#menu { 
 
    background: #555566; 
 
    position: relative; 
 
    width: 200px; 
 
} 
 
#menu li { 
 
    display: block; 
 
    min-height: 36px; 
 
    line-height: 36px; 
 
} 
 
#menu a { 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 0px 10px; 
 
    border-top: 1px dotted #5c5c6d; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
#menu a.counter:after, 
 
#menu a span.counter { 
 
    content: attr(data-count); 
 
    background: red; 
 
    color: white; 
 
    font-size: 12px; 
 
    padding: 2px 5px; 
 
    border-radius: 50%; 
 
    /*float:right;*/ 
 
}

<ul id="menu"> 
 
    <li><a href="#">List Item 1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">List Item 2</a> 
 
    <ul> 
 
     <li><a href="#">SubList Item 1<span class="counter" data-count="2">1</span></a> 
 
     </li> 
 
     <li><a href="#">SubList Item 2</a> 
 
     </li> 
 
     <li class="last"><a href="#" class="counter" data-count="2">SubList Item 3</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">List Item 3</a> 
 
    </li> 
 
    <li><a href="#">List Item 4</a> 
 
    </li> 
 
</ul>

Answer 1

当你做一个内联元素浮动，也按照在CSS 2.1 Section 9.7表变得display:block。

块元素的高度如果没有指定明确的高度/最小高度/最大高度，则它包含的线框堆栈的总高度，在这种情况下，包含计数器的一行它的价值。

线框的高度（至少）是继承的线条高度值的高度，使元素成为包含的线条高度的高度。所以你调整行高来纠正这是合法的。

另一种方法是将计数器元素分离为内部和外部元素，将外部元素浮动并将红色圆形样式添加到内部元素，然后可以保留display:inline。

Answer 2

answare是因为span是一个内联元素。解决方法是像这样在css中添加高度重置（限制）：

#menu a span.counter { 
    content: attr(data-count); 
    background: red; 
    color: white; 
    font-size: 12px; 
    padding: 2px 5px; 
    border-radius: 50%; 
    float:right; 
    display: inline-block; 
    line-height: 1; 
} 

Answer 3

我讨厌在这种情况下漂浮的东西。在我看来，现在唯一浮动的东西大部分都是网格系统（最终将由弹性盒实现取代）。

我会这样做的方式（可能只是个人偏好）与position ing。

下面是一个半伪代码（只是它的症结）实施如何与相对和绝对定位

<li><a href="#">SubList Item 1<span class="counter" data-count="2">1</span></a></li> 

li a { display: inline-block; position: relative; padding-right: 5px; } 
li a span.counter { position: absolute; left: 100%; top:0; }