フローティングコンテンツを含むリンクには高さがありません

Question

リンクのリストがあります。リンクの内側にはimgが左に浮かび、divが右に浮かびます。浮動小数点のため、リンクは高さに崩壊します。オーバーフロー：autoをリンクに適用しましたが、これは何の違いもなく、display：blockもありません。ご協力ありがとうございました。

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

あなたは自己明らかにその子にアンカータグを強制します。