Question

不确定，我没有完全包裹下来。现在为了让事情变得更容易，我为所有东西添加了边框和背景颜色。所以这是我的HTML ......

现在我可以在页面包装div中添加一个浮点数，但这是一个黑客而不是正确的方法。现在一切都按照它现在的设置方式工作，但我不喜欢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添加到包装器或带有clear: both的元素。

#page-wrapper {overflow: hidden}

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

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

1 个答案: