清除输入而不添加 Float

Question

如果不添加浮动，提交按钮似乎无法正确清除。有人可以帮我解决这个问题吗（没有双关语）。

http://jsfiddle.net/qb5TH/

CSS：

.left {float:left}
.clear {clear:both}

形式：

<form>
  <label class="left">Label</label>
  <input type="text" class="left">
  <label class="clear left">Label</label>
  <input type="text" class="left">
  <input type="submit" class="clear">
</form>

Answer 1

我可能不太清楚你的意图，但如果你想让你的按钮到它自己的行，你可以强制它使用 display: 块，它会转到下一行。

这是 CSS：

.left {float:left;}
.clear {clear:both;}
input[type=submit] {display: block;}

**jsfiddle 示例

Answer 2

提交按钮没有移动到下一行的原因是 input 是一个 inline 元素。根据 CSS 规范，clear 在内联元素上被忽略（相关引用：“适用于：块级元素”）。在提交按钮上设置 float 有效，因为 设置 float 在大多数情况下还会设置 display: block。您可以通过直接在要清除的提交按钮上设置 display: block 来达到相同的效果：

.left {float:left}
.clear {clear:both}
input[type=submit].clear {display:block}