title: <P> text is outside of it's block boundary
body: <p>Please see the code below. When I opened the page in the browser, I see that the text of the paragraph is well outside of its box boundary. </p>
  
  <p>I read somewhere that a floated element is ignored by other element in "normal flow". In this case, the <code>&lt;p&gt;</code> should behave as if the div wasn't there. The position of the paragraph's borders kind of supports that idea, but its text is outside of the borders instead of at the top left corner.</p>
  
  <p>It doesn't seem like a bug as it behaves the same in IE11, Firefox and Chrome. Is this behavior specified by any HTML standard? Thanks!</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;div style="border: solid 5px; width: 200px; height: 200px; float:left"&gt;&lt;/div&gt;
      &lt;p style="border:solid red 5px;width:100px;height:100px;"&gt;hello world&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Edit: thanks for the responses people! But I wasn't intending to ask for the method to place the paragraph text in the  div. I just want to know why the paragraph border is contained in the div, while its text is outside. This layout concept just doesn't make sense to me.</p>