Html 我如何使我的包裹按钮的DIV使用一些垂直空间？

我有以下HTML，其中float left和float right类就是这样做的：

<div class="block-footer">
   <button class="medium float-left">A</button>
   <button class="medium float-left">A</button>
   <button class="medium float-left">A</button>
   <button class="medium float-right">A</button>
   <button class="medium float-right">A</button>
</div>

A.
A.
A.
A.
A.

这是可行的，但我的div似乎没有占据任何垂直空间，这是接下来的问题。当我这样做时：

<div class="block-footer">
   <button class="medium float-left">A</button>
   <button class="medium float-left">A</button>
   <button class="medium float-left">A</button>
   <button class="medium float-right">A</button>
   <button class="medium">A</button>
</div>

A.
A.
A.
A.
A.

然后DIV占用空间

---

那么，如何让一些按钮向左浮动，一些按钮向右浮动，而DIV仍然使用一些垂直空间呢？

您需要在容器DIV上设置

溢出：auto

---

这是由于。查看有关其工作原理的答案。实际上，浮动就是这样做的，浮动，就像从文档流中删除一样，这会导致容器div崩溃。

看看，您可以通过自己的

clearfix

类为浮动按钮使用它。像这样：

.clearfix:before、.clearfix:after{display:table；content:；}.clearfix:after{clear:both；}

但是，我没有看到这在

按钮

元素上是如何工作的，但是尝试一下。。它还取决于您需要支持的浏览器，或者您可以添加clearfix

div

作为

块页脚中的最后一个子项。您也知道，如果浮动
块页脚
，也会使其环绕浮动的子项。这是可行的，但您能告诉我吗。这与清除浮动不同/更好吗？使用此方法，您不需要添加任何其他元素来清除浮动，也不需要旧的clearfix黑客解决方法。