内容溢出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;
}

- user3277015

Answer 1

您需要清除浮动：

<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>

因为你将标志浮动，所以跟随它的任何内容都会环绕它。这就是导致你看到的效果的原因。

- Michael Pasqualone

---

谢谢，伙计！现在完美运行 :) - user3277015

你可能想考虑使用::after伪选择器来清除浮动，而不是添加一个空的HTML元素：http://jsfiddle.net/NMbSd/ - Thomas Higginbotham

Answer 2

将#header div添加overflow:auto以恢复预期的行为：

#header {
    position: relative;
    width: 100%;
    background: yellow;
    border: 1px solid black;
    overflow:auto;
}

jsFiddle示例

将子元素浮动实质上将其从布局流中移除，导致父元素坍塌。添加overflow规则可以得到你期望的行为。

- j08691

Answer 3

我建议您使用flex。它非常强大，可以让您创建任何类型的布局而不会出现任何问题。我已经在右侧添加了一个菜单，只是为了在实际上下文中说明您的标志。

<!-- HTML -->
<div id="wrapper">
    <div id="container">
        <div id="header">
            <div id="logo">
                TEXT GOES OUTSIDE OF DIV :'((
            </div>
            
             <div id="content-menu">
                 <div id="menu">
                   <a href="#">Home</a>
                   <a href="#">Contact</a>
                   <a href="#">About</a>
                   <a href="#">About</a>
                 </div>
             </div>
        </div>
    </div>
</div>

相应的CSS：

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

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

#logo { flex: 1; }

#content-menu { flex: 4;}

#menu { display: flex; }

#menu > a {
  display: inline-block;
  text-align: center;
  line-height: 32px;
  text-decoration: none;
  color: #000;
  flex: 1;
}

- incalite