Html 浮动div没有正确包装

我有一堆div要浮动。出于某种原因，当它达到3行浮动div时，div开始表现得很滑稽。以下是JS小提琴：

这似乎与我设定的名字有关。代码如下：

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />AccuDrop</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />AccuPen Vet</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Accutome Vet</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Connect Platform Catalog</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Instrument Care and Handling</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Opti-Kleen Diamond Knife Cleaning System</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Portables Brochure</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Surgical Disposable Catalog</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />PachPen Study</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />AccuPen Paper</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Femtosecond Cataract Instruments</a>
</div>

---

不确定您的

：after

规则的作用是什么，但我会将其替换为：

.pdfs:nth-child(4n+5) {
    clear:both
}

---

您需要清除每行末尾的float属性。有趣的活动是由于某些行的高度参差不齐

---

在每三个div之后添加

将解决此问题。缺点是无论窗口大小如何，它都会强制每行执行三个项目。这基本上是一种表示每行末尾的方法。

我在某处找到了浮动div的代码。不知道那之后做了什么。你能解释一下为什么这样做吗？当然，你需要清除浮动的div，以便下一行的第一个div一直向左移动，否则它们都是浮动的，而你想成为最左边的div，当它比后面的另一行长时，就会卡在上面一行的文本上。这段代码只是确保清除每行第一个div上的浮动。如果在div上加上边框，您将看到挂起较低的文本如何导致其后面的div挂起。清除第4n+5个div将迫使它进入下一行。它如何知道什么时候是第一个div以及4n+5是关于什么的？因为您将宽度设置为22%，所以一行只能容纳四个div，所以您希望每五个div清除一次。4n+5规则从n=0开始，所以这将添加一个clear：第五、第九、第十三等元素。有关第n个孩子的详细说明，请参阅。

.pdfs:nth-child(4n+5) {
    clear:both
}