使用带有``inline block``元素的`box` with : border-box`

Question

我想使用box-sizing: border-box CSS属性将一个表单拆分为左右两半：

<form class=container>
  <fieldset class=left>
    <label>Description</label>
    <textarea name=description></textarea>
  </fieldset>
  <fieldset class=right>
    <label>Name</label>
    <input type=text name=name />
  </fieldset>
</form>

为了实现这一点，我需要将两个<fieldset>元素都向左浮动：

.left, .right {
  width: 50%;
  margin-left: 0px;
  marign-right: 0px;
  box-sizing: border-box;
  float: left;
}

当然，问题是由于浮点数是浮动的，它们不再是流中的，<form>元素的高度为0(除非我添加了一个clearfix或其他东西)。如果我删除<fieldset>属性并将它们的显示更改为inline-block，它们将返回到流中，但它们不再相邻排列。

有没有什么方法可以在这里使用border-box而不需要添加一个clearfix元素(或者:after伪元素)？

作为参考，here's是一个使用浮点数的小提琴，here's是一个使用inline-block的小提琴。

Answer 1

这是一个相当常见的问题。

在容器上添加overflow值，将使浏览器重新计算容器的尺寸，尽管它没有非浮动元素。

.container { overflow: hidden; }

和