html - 页面包装器根本不包含或包装？

Question

不确定，我的并没有一直环绕下去。现在为了让事情变得更容易，我为所有内容添加了边框，为所有内容添加了背景颜色。所以这是我的 html...

现在我可以在页面包装器 div 的左侧添加一个 float ，但这是一种技巧，而不是正确的方法。现在一切都按照现在的设置方式工作，但我不喜欢 div 没有包装的东西，这真的很烦人。

这是 JSFiddle http://jsfiddle.net/ywgpB/15/

HTML

<div id="page-wrapper">
    <div class="leftContainer">
        <article class="welcome">
            <header>
                <h2>Welcome!</h2>
                <img src="../images/dummy_125x125.png">
                <p>Dummy Text</p>
            </header>
         </article>

        <article class="hours">
            <header>
                <h2>Working Hours</h2>
                <p>MON - FRI 5:00 AM to 11:00 PM
                <br />SAT - SUN 7:00 AM to 8:00 PM</p>
            </header>
        </article>

        <article class="location">
            <header>
                <h2>Location</h2>
            </header>    
        </article>
    </div>

    <section id="main">
        <div id="banner"></div>
        <div class="containBox">
            <article class="box">
                <h2>Our Members</h2>
                <p></p>
                <button></button>
            </article>

            <article class="box">
                <h2>Classes</h2>
                <p></p>
                <button></button>
            </article>

            <article class="box">
                <h2>Programs</h2>
                <p></p>
                <button></button>
            </article>
        </div>
    </section>
</div>

CSS

body{
    background-image: url(../images/pageglare.png);
    background-repeat: no-repeat;
    color: #000305;
    font-size: 87.5%;
    font-family: Tahoma, Arial, "Lucida Sans Unicode";
    line-height: 1.5;
    text-align: left;
}

#page-wrapper{
   margin: 0 auto;
   width: 90%;
   background-color: pink;
   clear: both;
   border: 2px solid darkorange;
}

.logoContainer{   
   width: 15%;
   border: 2px solid blue;
   margin: 2% 0;
 }



 .leftContainer{
   border: 2px solid darkcyan;
   width: 25%;
   float: left;
   background-color: cyan;
   display: block;
 }

 .welcome{
   width: 100%;
 }

 .welcome img{
   float: left;
 }

.hours{
   float: left;
   width: 100%;
 }

.location{
    float: left;
    width: 100%;
 }

#main{
   width: 65%;
   margin: 0 2%;
   border: 2px solid green;
   float: left;
   background-color: lightgreen;
}

#banner{
   width: 98%;
   height: 300px;
   border: 2px solid gray;
   float: left;
}

.containBox{
   margin-left: 1%;
   width: 97%;
   border: 2px solid black;
   height: 250px;
   clear: both;
   background-color: gray;
   float: left;

}

 .box{
    width: 30%;
    border: 2px solid red;
    height: 250px;
    float: left;
  }

Answer 1

将 overflow: hidden 添加到包装器，或在 float 元素之后添加 clear: both 的元素。

#page-wrapper {overflow: hidden}

http://jsfiddle.net/ywgpB/16/