title: How does CSS clearing really work?
body: <p>I have a <code>&lt;div&gt;</code> that I want to be on a line by itself. According to <a href="http://www.w3schools.com/Css/pr_class_clear.asp" rel="nofollow noreferrer">W3Schools</a>, this rule:</p>
  
  <pre><code>div.foo {
    clear: both;
  }
  </code></pre>
  
  <p>...should mean this:</p>
  
  <blockquote>
    <p>"No floating elements allowed on either the left or the right side."</p>
  </blockquote>
  
  <p>However, if I float two <code>&lt;div&gt;</code> elements left, and apply the rule above to the first one, the second one does not budge.</p>
  
  <p>On the other hand, if I apply <code>"clear: left"</code> to the second <code>&lt;div&gt;</code>, 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.</p>
  
  <p>Is the W3Schools description above poorly stated, or am I missing something? <strong>Is a clearing rule only able to move the element to which it is applied?</strong></p>
  
  <h2>Answer</h2>
  
  <p>Thanks Michael S and John D for the good explanations. Warren pointed to <a href="http://www.w3.org/TR/REC-CSS2" rel="nofollow noreferrer">the CSS2 spec</a>, and that's where I found this answer (emphasis mine):</p>
  
  <blockquote>
    <p>This property indicates which sides of an element's box(es) may not be adjacent to an  <strong>earlier</strong> floating box.</p>
  </blockquote>
  
  <p>So: <code>clear</code> only affects the position of the element to which it is applied, relative to elements that appear before it the code.</p>
  
  <p>Disappointing that I can't tell my <code>&lt;div&gt;</code> to make other divs move down, but them's the breaks. :)</p>