title: float:left paragraph followed by float:none paragraph
body: <p>I am trying to understand the float behavior, so I wrote the simple two paragraphs below. </p>
  
  <p>The second paragraph which is float:none, appears to "contain/surround"  the first paragraph which is float:left.</p>
  
  <p>Someone please help me understand why is that.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p style="float:left; border:red solid 1px;"&gt;
    first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph.
  &lt;/p&gt;
  
  &lt;p style="float:none; border:green solid 1px;"&gt;
    second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>