包含浮动内容的链接没有高度

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

如果对anchor标记应用clearfix：

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

您强制锚标记自我清除其子项。