title: Why clear: right doesn't work as intended
body: <p>I'm always confused by <code>clear: left</code>, <code>clear: right</code> and <code>clear: both</code> in CSS. I know <code>clear: both</code> means it doesn't allow floating elements on both sides of itself.</p>
  
  <p>I did some testing <a href="http://jsfiddle.net/malaikuangren/xqFUL/1/" rel="noreferrer">here</a>. I thought the layout would appear like below, because <code>B</code> uses <code>clear: both</code>. But it doesn't. Could someone tell me why?</p>
  
  <p>A<br>
  B<br>
  CD</p>
  
  <p><strong>Updated</strong>
  (Post the code)</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="A"&gt;a&lt;/div&gt;
      &lt;div class="B"&gt;b&lt;/div&gt;
      &lt;div class="C"&gt;c&lt;/div&gt;
      &lt;div class="D"&gt;d&lt;/div&gt;
      &lt;div class="CB"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .container{
      width:100%;
      border:1px solid red;    
  }
  .B{
      float:left;
      clear:both;
      width:10%;
      height:30px;
      border:1px solid blue;
  }
  .A,.C,.D{
      float:left;
      width:10%;
      height:30px;
      border:1px solid blue;
  }
  .CB{
      clear:both;
  }
  </code></pre>