Question

我改变了我的问题，因为我缩小了问题的原因：

  <div id="wrapper" class="centrDiv clearfix">
            <div id="LEFT-CONTAINER">
                <div id="logo" class="centrSlik">
                    <img src="wheel.gif"/>
                </div>
                <div id="podmeni">
                    <ul><li><a>whatever</a></li></ul>
                    ...
                </div>
            </div>

            <div id="RIGHT-CONTAINER">
            <div id="meni">
                <ul>
                    <li><a href='whatever'>whatever</a></li>
                    ...
                </ul>
            </div>

            <div id="tekst">
                <p>whatever</p>
                ...
            </div>
            </div>
        </div>

描述它的CSS：

#wrapper{max-width: 1000px; margin-top: 15px; background: #99CCCC;}
#menu{overflow:auto;background: #FF9999; border-bottom-left-radius: 10px 20px; border-bottom-right-radius:20px 10px; border: 1px solid #FF9999; opacity:0.9;}
#LEFT-CONTAINER{float: left; background-color: #71637D;}

我的问题是为什么#RIGHT-CONTAINER溢出div#menu？我知道如何解决它，但希望知道为什么会发生溢出。

谢谢！

screen capture

Answer 1

浮动容器会使其脱离“流”，类似于绝对定位。

请参阅以下参考资料：

http://css-tricks.com/all-about-floats/

http://css-tricks.com/the-css-overflow-property/

你可以做的是将overflow:hidden放在你不想与浮动冲突的元素上。

Answer 2

您需要float:left; #left-container和#right-container或至少float:right; #right-container，还要记得清除你的花车

Answer 3

假设您的右侧容器没有绝对定位，我会在其上设置一个左边距等于左侧容器的宽度，在这种情况下为130px。这意味着您不必担心页面上的所有清除和所有元素都会浮动。

Answer 4

遗憾的是，CSS是一种相对较差的创建列布局的工具。请查看http://www.alistapart.com/articles/fauxcolumns/以获取替代方法。

Answer 5

结合@Joseph和@PCasagrande的答案并详细说明......

将float: left应用于#left-container会将其从流中取出，这实际上意味着所有其他非浮动block内容不再意识到它存在。因此，#right-container，一个块元素，在没有其他内容并填充其容器宽度时执行通常所做的操作。

需要注意的一点是，内联内容确实不会出现浮动内容。这就是为什么在您的屏幕截图中，#right-container内的内容位于#left-container右侧，#right-container的背景位于#left-container后面。请参阅http://jsbin.com/eyusew/edit#html,live上的示例。

通过简单地将#right-container上的左边距等于浮动的宽度，您实际上为浮动创建了一些空间。一个例子：http://jsbin.com/iqufiw/2/edit#html,live。请注意，现在#right-container中的内容向右移动，无论浮动是否存在http://jsbin.com/iqufiw/3/edit#html,live。

附注：您很可能希望将某种clearfix CSS应用于#wrapper。

为什么会发生溢出？

5 个答案: