Home/ Questions/Q 56043
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T17:28:21+00:00

I have a <div> that I want to be on a line by itself.

  • 0

I have a <div> that I want to be on a line by itself. According to W3Schools, this rule:

div.foo {   clear: both; }

…should mean this:

‘No floating elements allowed on either the left or the right side.’

However, if I float two <div> elements left, and apply the rule above to the first one, the second one does not budge.

On the other hand, if I apply 'clear: left' to the second <div>, it moves down to the next line. This is my normal approach, but I don’t understand why I have to do it like this.

Is the W3Schools description above poorly stated, or am I missing something? Is a clearing rule only able to move the element to which it is applied?

Answer

Thanks Michael S and John D for the good explanations. Warren pointed to the CSS2 spec, and that’s where I found this answer (emphasis mine):

This property indicates which sides of an element’s box(es) may not be adjacent to an earlier floating box.

So: clear only affects the position of the element to which it is applied, relative to elements that appear before it the code.

Disappointing that I can’t tell my <div> to make other divs move down, but them’s the breaks. 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. When you apply clear to an element, it will move THAT element so that it doesn’t have items left or right of it. It does not re-position any of the other elements, it simply moves the element to a position where nothing is around it.

    Edit

    Items above the item cleared are not moved, items below the element COULD be moved. Also note the additional comment in the comments

    • 0