title: clearfix not working for position absolute
body: <p>I have a div containing position absolute and float left and right. Now i want to place an image below the first div.</p>
  
  <p>Now the problem is the image overlapping below the first div. I want the image to display below first div without overlapping.</p>
  
  <p><a href="https://jsfiddle.net/jv7afgn1/" rel="nofollow">https://jsfiddle.net/jv7afgn1/</a></p>
  
  <pre><code>&lt;div class="top"&gt;
      &lt;div class="left" align="center"&gt;
          &lt;p&gt;&lt;a href="#"&gt;Sell&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;&lt;a href="#"&gt;Download App&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;&lt;a href="#"&gt;24x7 Customer Care&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="right" align="center"&gt;
          &lt;p&gt;&lt;a href="#"&gt;Track Order&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  
  &lt;div class="logo_menu"&gt;
      &lt;p&gt;&lt;img src="assets/images/logo.png" alt="" title="" /&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  .clearfix {
      clear:both;
  }
  /* Top */
  .top {
      width:100%;
      height:auto;
      background:#E9E9E9;
      position:absolute;
      padding:10px;
  }
  .top .left {
      float:left;
  }
  .top .left p {
      display:inline-block;
      margin:0 10px 0 10px;
      font-size:12px;
  }
  .top .left p a {
      text-decoration:none;
      color:#B5B5B5;
  }
  .top .left p a:hover {
      text-decoration:underline;
      color:#FD6123;
  }
  .top .right {
      float:right;
  }
  .top .right p {
      display:inline-block;
      margin:0 10px 0 10px;
      font-size:12px;
  }
  .top .right p a {
      text-decoration:none;
      color:#B5B5B5;
  }
  .top .right p a:hover {
      text-decoration:underline;
      color:#FD6123;
  }
  
  /* Menu and Logo */
  .logo_menu {
      width:100%;
      height:auto;
  }
  </code></pre>