title: inline element next to the float
body: <p>I am stuck trying to figure it out how exactly inline element and floated element behave when are next to each other. I have following code in which inline element comes before the floated one and the second situation when inline element comes after the floated one and in both situation. </p>
  
  <p>html code is the same in both examples so I am gonna put it just here:</p>
  
  <pre><code>&lt;body&gt;
      &lt;p class="first"&gt;first paragraph&lt;/p&gt;
      &lt;p class="second"&gt;second pargraph&lt;/p&gt;
      &lt;p class="clearBoth"&gt;&lt;/p&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>So here is first example in which is the inline element before the floated one, along with following css:</p>
  
  <pre><code>html{
      background:white;
  }
  p.clearBoth{
      clear:both;
  }
  body{
      width:400px;
      margin:0 auto;
      background:red;
     }
      p.first{
      display:inline;
      background:yellow;
      color:black;   
      }
     p.second{
     float:left;         
     background:black;
     color:white;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/4WTW7/" rel="nofollow">and here is the link what this code does</a></p>
  
  <p>Here is second example where the floated element is first element, along with the following css code:</p>
  
  <pre><code>html{
      background:white;
  }
  p.clearBoth{
      clear:both;
  }
  body{
      width:400px;
      margin:0 auto;
      background:red;
     }
      p.first{
      float:left;
      background:yellow;
      color:black;   
      }
     p.second{
     display:inline;         
     background:black;
     color:white;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/v5dgR" rel="nofollow">And here is link what it does</a></p>
  
  <p>In both cases I've noticed that the float element will be first to the left no matter which one is first in html document, but I find this align very strangeto happen since I would normally expect both to be in same line. </p>