浮动div不会推动其他div正确

Question

当谈到css时，我不是专家，但我正试图让浮动的div工作。我有两个div，顶部一个漂浮在左边，另一个div应该右边。它似乎有点这样做。问题是，即使它看起来正确，它实际上并没有将盒子推到右侧。我有一个jsfiddle，你会明白我的意思。我在div上设置了一个名为content的红色边框。你会看到内容看起来是正确的，但是h1下面的虚线红线从浮动对象的开头而不是H1标题下开始。请帮我理解。这是jsfiddle：http://jsfiddle.net/wCnY3/

<div id="subNav">box</div><div id="content">WELCOME</div>

Answer 1

使用#content属性定位overflow-x:hidden元素。

#content {
    overflow-x:hidden;
}

像这样：http://jsfiddle.net/wCnY3/1/

按照设计，overflow:hidden具有强制元素表现得像方形/矩形的效果。由于您没有为元素设置宽度/高度，这只是意味着它的包装行为已更改。