htlm5漂浮的内容不工作

Question

我试图把旁边和部分并排放在一边，但我在main_wrapper高度上有一些问题，不跟随和部分元素。

我试着将main_wrapper浮动到左边，它工作但内容不居中。

例如：

http://jsfiddle.net/johnytota/adWjh/

<div id="main_wrapper"> 
     <header> 
        <img id="logo" src="css/images/logo.png" alt="logotipo"> 
        <img id="slider" class="slider" src="css/images/slide_1.png" alt="logotipo"> 
     </header> 

      <aside class="aside float">   
        <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br> 
        <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br> 
        <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br> 
        <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br> 
        <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br> 
        <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br> 
        <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br> 
        <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br> 
        <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br> 
        <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br> 
        <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br> 
        <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br> 


     </aside> 


     <section class="posts float"> 
        <article> 
       <header> 
        <h2>Article title1</h2> 
        <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p> 
       </header> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
      </article> 

     </section> 


     <footer class="clearfix"> 
      <p>Copyright 2009 Your name</p> 
     </footer> 
     </div> 
    </body> 

这是我的CSS

@media all and (min-width: 942px) { 
    body { 
     background: #eee; 
    } 

    #main_wrapper{ 
     width: 940px; 
     margin: 0 auto; 
     border:solid 1px black; 
     display: block; 
    } 

    .aside{ 
     width: 300px; 
     border:solid 1px black; 

    } 

    .posts{ 
     width: 635px; 
     border:1px solid blue; 
    } 

    footer{ 
     text-align: right; 
    } 

/* ///////////////////  floats ///////////////// 
    ///////////////////  floats /////////////////*/ 

.float{ 
     float:left 

} 

.clearfix{ 
    celar:both; 
} 

Answer 1

添加overflow: hidden到主包装。