html - 如何使包装按钮的 DIV 使用一些垂直空间？

Question

我有以下 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>

这行得通，但我的 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>

然后 DIV 占据空间。

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

Answer 1

您需要overflow:auto在您的容器 div 上进行设置。

jsFiddle 示例

这是由于块格式化上下文。查看这个问题的答案，了解它是如何工作的。本质上，浮动就是这样做的，浮动，并且就像它们从文档流中删除一样，这会导致容器 div 崩溃。