浮動元素如何影響其高度/顯示？

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; }