title: behavior of float in css
body: <p>Here is a css</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;
  &lt;title&gt;Jenware | Personalized Gifts&lt;/title&gt;
  &lt;style type=&quot;text/css&quot;&gt;
  
  
  /* styles for navigation */
  #nav {
      background-color: #2322ff;
      height: 3em;
      width:70em;
  }
  #nav ul {
      list-style:none;
      margin: 0 auto;     
  
  } 
  #nav ul li {
      font-weight: normal;
          text-transform: uppercase;
      float:left;
  }
  
   #nav ul li a {     
    display: block;   
    padding: .5em;    
    border: 1px solid #ba89a8; 
    border-radius: .5em;  
    margin: .25em; 
  
  }    
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=&quot;nav&quot;&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;House&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;Baby&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;More&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!-- end #content --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>It appears as follows
  <img src="https://i.stack.imgur.com/82ldU.png" alt="enter image description here" /></p>
  <p>where as if the css is following</p>
  <pre><code>}
  #nav ul {
      list-style:none;
      margin: 0 auto;     
      float:left;
  } 
  </code></pre>
  <p>then following appears
  <img src="https://i.stack.imgur.com/QUEKp.png" alt="enter image description here" />
  I am unable to understand the behavior of <code>float:left</code> in above images.
  Why in 2nd kind of css it is getting down one by one? where as in first one it is coming properly?</p>