css - 浮动 div 不会将其他 div 推到正确位置

Question

我不是 css 专家，但我正试图让一个浮动 div 工作。我有两个 div，最上面的一个向左浮动，另一个 div 应该向右环绕。它似乎有点这样做。问题是即使它看起来正确，它实际上并没有将框推到它的右侧。我有一个 jsfiddle，你会明白我的意思。我在名为 content 的 div 上设置了一个红色边框。您会看到内容看起来差不多，但是 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具有强制您的元素表现得像正方形/矩形的效果。由于您没有为元素设置宽度/高度，这仅意味着其包装行为已更改。