title: CSS Span Float Left
body: <p>So I have a div and two spans:</p>
  
  <pre><code>&lt;div class="A"&gt;
      &lt;span class="B"&gt;&lt;/span&gt;
      &lt;span class="C"&gt;&lt;/span&gt;
      &lt;span class="clear"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Assume that B and C has sufficient contents. The CSS snippet is:</p>
  
  <pre><code>.A { position: absolute; } /* I need this to be absolute */
  .B, .C { float: left; }
  .clear { clear: both; }
  </code></pre>
  
  <p>But I keep getting the layout of the right image, while I want it to be like layout of first image (refer to image below)
  <img src="https://i.stack.imgur.com/SdHcr.png" alt="enter image description here"></p>
  
  <p>Please help me. And it would be better if you kindly explain a bit why do they happen and why is my code not working like I expected. How is float actually working. Thanks.</p>