Confusion about how to apply the clear attribute in CSS

Question

I'm working through a tutorial and I have a form that uses float elements. The form currently has all the labels and input boxes next to each other.

To align the form so that everything is on the left the book teaches me to:

Put-> clear: left; as below

label {
  float: left;
  width: 5em;
  text-align: right;
  margin-right: .5em;
  **clear: left;**
}
input {
  background-color: #CCCCFF;
  float: left;
  clear: right;

The way I understand the clear attribute is that if I set it on a floating element, it means that I want nothing to the left/right/both of that element.

Therefore, in my head, instead of putting the clear attribute on the label, putting that clear:right; on the input should also work (because then nothing can be on the right side of the input box), but of course it doesn't.

There's a gap in my understanding, can someone please point out why putting the clear:right attribute on the inputs won't work the same as putting the clear:left attribute on the label?

Thank you

Answer 1

basically the clear property kind of overwrites the float.

i prepared this example: http://jsfiddle.net/vlrprbttst/JF7wD/1/

all divs are floated to the left. when float is applied, they all go next to each other. what if you need to temporary block this behaviour but still need a floated element? that's when you use clear

not the best way to explain it but i hope you got it :)

Answer 2

The <input> and <label> elements are inline elements by default, so under normal circumstances they do not fill the width of their parent elements and do not require their own line. So having <input> elements and <label> elements one-after-the-other do not strictly require any floating logic:

<form>
    <input type="text"></input><label>test</label>
    <input type="text"></input><label>test</label>
    <input type="text"></input><label>test</label>
</form>

Without any CSS, the above markup produces this:

The float:left CSS is used to force elements out of the flow of the document, and hug their adjacent counterparts. It's used mainly on block elements. The clear:left/right/both then overrides this functionality in order to bring the proceeding elements back into the flow of the document. Read about it here.

If you're simply wanting to force <input> elements to be on their own line, perhaps you could wrap them in a block element like a <div>:

<form>
    <div>
        <input type="text"></input><label>test</label>
    </div>
    <div>
        <input type="text"></input><label>test</label>
    </div>
    <div>
        <input type="text"></input><label>test</label>
    </div>
</form>

The above, without any CSS, will produce this:

Read about inline and block elements in order to further your understanding of how elements are positioned naturally within the document.

To summarise, the float CSS property is a way of taking an element out of the flow of the document and positioning it to the left or right of inline elements. To quote MDN:

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

Answer 3

it won't work as you are using float: left and want to clear: left, not clear: right. as demonstrated here

See my code below:

CSS

label {
  float: left;
  width: 5em;
  text-align: left;
  margin-right: .5em;
  clear: left;
}
input {
  background-color: #CCCCFF;
  float: left;
  clear: left;
}

HTML - ensure the order you want the labels in is correct here too

<form>
    <label>test</label><input type="text"></input>
    <label>test</label><input type="text"></input>
    <label>test</label><input type="text"></input>
</form>

You can choose to clear both if unsure, however if you are floating left use clear left, not clear right, as there is nothing to clear on the right.