html - 内容超出 div

Question

实在想不通是哪里出了问题，但是我往div里面加的所有内容，都从里面出来了，就跟不在里面一样。

在这里查看:JSFiddle !

HTML___

<div id="wrapper">
    <div id="container">
        <div id="header">
            <div id="logo">
                TEXT GOES OUTSIDE OF DIV :'((
            </div>
        </div>
    </div>
</div>

CSS___

#container {
    width: 960px;
    margin: 20px auto 0 auto;
    background: yellow;
}

#header {
    position: relative;
    width: 100%;
    background: yellow;
    border: 1px solid black;
    padding: 2px; /*just to see the div*/
}

#logo {
    float: left;
}

Answer 1

你需要清除你的 float :

<div id="wrapper">
    <div id="container">
        <div id="header">
            <div id="logo">
                TEXT NOW APPEARS INSIDE DIV :)
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>
</div>

因为您已经 float 了您的 Logo ，它后面的任何内容都会环绕它。是什么导致了您所看到的效果。