title: vertical alignment and float: left
body: <p>I am having trouble understanding the <code>float</code> attribute. I have this code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#p1 {
    border: solid black 3px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="p1" style="float:left"&gt;Paragraph 1&lt;/p&gt;
  &lt;a href="https://facebook.com" style="float:left"&gt; This is a link &lt;/a&gt;
  &lt;p&gt;Paragraph 2&lt;/p&gt;
  &lt;p&gt;Paragraph 3&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, the result I expect is to have Paragraph1 in the first line, then the link next to it, then  Paragraph2 next to the link and Paragraph3 in the second line. But the result that this code gives me is this:  </p>
  
  <p><img src="https://i.stack.imgur.com/H8rQv.png" alt="">  </p>