Link mit floated Inhalt hat keine Höhe

Question

Ich habe eine Liste von Links. Innerhalb der Links schwebte ein IMG links und ein Div schwebte nach rechts. Wegen der Schwimmkörper kollabiert die Verbindung zu keiner Höhe. Ich habe einen Überlauf angewendet: auto auf die Links, aber das macht keinen Unterschied, noch Anzeige: Block. Danke für Ihre Hilfe.

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

Wenn Sie einen clearfix auf die Anker-Tag gelten:

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

Sie zwingen, die Anker-Tags auf Selbst klar seine Kinder.