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添加到主包装器。