떠 다니는 내용이 담긴 링크는 높이가 없습니다.

Question

링크 목록이 있습니다. 링크 안에는 왼쪽으로 떠있는 img과 오른쪽으로 떠있는 div가 있습니다. 부유물 때문에 링크가 무너져 버립니다. 나는 overflow : 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; 
} 

당신은 자기 분명 그 아이에 앵커 태그를 강제합니다.