清除输入而不添加浮点数答案

【问题标题】：Clearing inputs without adding Float清除输入而不添加浮点数
【发布时间】：2020-07-09 08:11:46
【问题描述】：

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

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>

【问题讨论】：

为了清楚起见，看看提交按钮如何进入下一行。 jsfiddle.net/qb5TH/1
不是提交按钮，而是内联元素。尝试使用跨度，同样的事情。

标签： html css input css-float

【解决方案1】：

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

这是 CSS：

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

**jsfiddle sample here

【讨论】：

【解决方案2】：

提交按钮没有移到下一行的原因是input是一个内联元素。根据CSS spec，clear 在行内元素上被忽略（相关引用：“适用于：块级元素”）。在提交按钮上设置float 有效，因为setting float in most cases also sets display: block。您可以通过在要清除的提交按钮上直接设置display: block 来达到相同的效果：

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

【讨论】：