Question

我看到其他CSS浮点问题有很多IE 7的解决方法，但是我还没有找到一个解决这个问题的方法：当一个元素同时具有clear和float属性时，清除不会工作正常。

This jsFiddle illustrates the problem。我正在努力解决一个非常基本的问题。我有一个带有标签/表单项对的表单。标签应位于左侧，表单项应位于标签的右侧。下一个标签应显示在下一行。使用这个简单的HTML：

<fieldset>
  <label>Label 1:</label>
  <input type="text" />

  <label>Label 2:</label>
  <input type="text" />
</fieldset>

这个CSS应该足够了：

label {
    width: 200px;
    text-align: right;
    clear: both;
    float: left;
}

input {
    float: left;
}

然而，正在发生的事情是，尽管第二个标签清除浮动并在下一行渲染，但相邻的输入仍显示在第一行。

除了添加更多标记之外，是否有解决此问题的方法？

Answer 1

如果将组封装在单独的div中，问题就解决了。当然，你甚至根本不需要清楚。