html - html5 float 内容不起作用

Question

我试图将 aside 和 section 并排放置，但我在 main_wrapper 高度上遇到了一些问题，它没有跟在 aside 和 section 元素之后。

我尝试将 main_wrapper float 到左侧，它起作用了，但内容没有居中。

例子:

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