包含浮動內容的鏈接沒有高度

Question

我有一個鏈接列表。在鏈接裏面是img漂浮的左邊和右邊的div。由於浮動鏈接崩潰到沒有高度。我已將overflow：auto應用於鏈接，但這沒有任何區別，也沒有顯示：阻止。感謝您的幫助。

a { 
    overflow: auto; 
    display: block; 
    background-color:yellow; 
} 
li img { 
    width: calc(50% - 1.8rem); 
    float: left; 
} 
.text { 
    width: calc(50% - 1.8rem); 
    float: right; 
} 


<ul> 
    <li> 
    <a href="aaa.html"> 
     <img src="aaa.png"> 
     <div class="text">Lots of lovely text</div> 
    </a> 
    </li> 
    <li> 
    <a href="bbb.html"> 
     <img src="bbb.jpg"> 
     <div class="text">More nice words</div> 
    </a> 
    </li> 
</ul> 

Answer 1

如果應用clearfix到錨標籤：

a:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

優力錨標記，以自清楚它的孩子。