title: If a div has "clear:right", nothing should float to the right of it, should it?
body: <p>I seem to have gotten confused as to what the css "clear" keyword means.</p>
  
  <p>I have a number of div elements, all with "float:left". The second last div element also has "clear:right". I thought that would cause the subsequent element to go to the next line. But for me, it doesn't.</p>
  
  <p>Here's my example:</p>
  
  <pre><code>&lt;div class="Section"&gt;
      &lt;div class="Thumbnail"&gt;&lt;/div&gt;
      &lt;div class="Number"&gt;0&lt;/div&gt;
      &lt;div class="Title"&gt;ShopTVC Wallace and Gromit WOA 6Apr11&lt;/div&gt;
      &lt;div class="Duration"&gt;00:00:32&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>Looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/EjOBT.png" alt="enter image description here"></p>
  
  <p>I am trying to make the duration ("00:00:32"), appear on the next line, to the right of the thumbnail (the blue rectangle).</p>
  
  <p>I know that I could put the last three divs into another container div, but the purpose of this question is to understand why "clear:right" doesn't stop the duration from floating on the right of the title. </p>
  
  <p>Here's the CSS:</p>
  
  <pre><code>div.Section
  {
      overflow:auto;
      background:cornsilk;
      border:2px solid navy;
      padding:12px;
  }
  
  div.Section div.Thumbnail
  {
      width:64px;
      height:42px;
      background:SteelBlue;
      foreground:Navy;
  }
  
  div.Number
  {
      width:16px;
      margin-left:6px;
  }
  
  div.Duration
  {
      margin-left:22px;
  }
  
  div.Section div
  {
      float:left;
  }
  
  div.Section div.Title
  {
      color:DarkGreen;
      clear:right;
  }
  </code></pre>
  
  <p>And, of course, the jsfiddle link: <a href="http://jsfiddle.net/8J7V6/3/" rel="noreferrer">http://jsfiddle.net/8J7V6/3/</a></p>