Очистка ввода без добавления 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

Причина, по которой кнопка отправки не перемещается на следующую строку, заключается в том, что input является встроенным элементом.Согласно спецификации CSS , clear игнорируется для встроенных элементов (соответствующая цитата: «Применяется к: элементам уровня блока»).Настройка float на кнопке отправки работает, потому что настройка float в большинстве случаев также устанавливает display: block.Вы можете добиться того же эффекта, непосредственно установив display: block на кнопках отправки, которые вы хотите очистить:

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

Answer 2

Я, возможно, не совсем ясно о ваших намерениях, но если вы хотите, чтобы ваша кнопка находилась в отдельной строке, вы можете заставить ее использовать display: block, и она перейдет к следующей строке.

Вот CSS:

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

** jsfiddle образец здесь