Clearing inputs without adding Float

Question

Submit buttons don't seem to clear properly without also adding float. Can someone clear this up for me (no pun intended).

http://jsfiddle.net/qb5TH/

CSS:

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

Form:

<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>

Just to be clear, see how second case the submit button goes to next line. http://jsfiddle.net/qb5TH/1/ — mrtsherman, Jan 30 '12 at 04:09
It's not submit buttons, it's inline elements. Try with a span, same thing. — James Montagne, Jan 30 '12 at 04:12

score 1 · Answer 1 · answered Jan 30 '12 at 04:47

I might not be exactly clear on your intent but if you want to get your button to it's own line you can force it to use display: block and it will go to the next line.

Here's the CSS:

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

**jsfiddle sample here

score 1 · Answer 2 · edited May 23 '17 at 12:20

The reason why the submit button doesn't move to the next line is because input is an inline element. According to the CSS spec, clear is ignored on inline elements (relevant quote: "Applies to: block-level elements"). Setting float on the submit button works because setting float in most cases also sets display: block. You can achieve the same effect by directly setting display: block on the submit buttons that you want to clear:

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

Clearing inputs without adding Float

2 Answers2