Question

我有以下CSS代码，我的花车正从容器中掉出来。 Firefox没有这个问题。这种行为可能是什么原因？

<div class="container">
    <div class="leftmenu">
        ... some stuff here ...
    </div>
    <div class="rightmenu">
        <div style="float: right; text-align: right;">
            <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 1 </button>
            <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 2 </button>
            <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 3 </button>
            <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 4 </button>
        </div>
    </div>
</div>

Answer 1

容器（在您的情况下为“div.container”）一旦其子项浮动，将无法计算自身的正确高度。如果有任何子块没有浮动，容器将使用其中最高的子块。

无论如何，包含两个子块的容器都是常见的。有一些方法可以解决这个问题。考虑QuirksMode总结的方法最好。 http://www.quirksmode.org/css/clearing.html

因此，要解决您的问题，只需将其添加到您的CSS文件中即可。

div.container { overflow: auto; width: 100%; }

注意：宽度值可以是您想要的任何值。但它有义务在IE [67]

中触发HasLayout行为

另一种解决方法。您可以使用额外的div：

<div style="clear: both;"></div>

在div.right中div.container之后添加此内容。

然而，有更好的方法来做到这一点。在CSS中添加.clearfix实用程序类：

.clearfix {
  *zoom: 1;
}

.clearfix::before,
.clearfix::after {
  display: table;
  content: "";
}

.clearfix::after {
  clear: both;
}

将clearfix添加到div.container的class属性中。

Answer 2

在极少数情况下

<div style="clear:both;"></div>

不起作用，因为在这种情况下div使用默认的行高和默认的字体大小

将此类放入CSS

.clear { clear: both; font-size: 0px; line-height: 0px; height: 0px; overflow:hidden; }

并在代码

中使用它

<div class="leftmenu">
... some stuff here ...
</div>
<div class="rightmenu">
... some stuff here ...
</div>
<div class="clear"></div>

Answer 3

将此代码放在#rightmenu div的底部：

<span style="clear:both;"></span>

清晰的两种风格从左侧和右侧结束浮动。在浮动元素之后放置clear可以通过将浮动效果终止到容器的父元素内来防止浮动泄漏。

Answer 4

div rightmenu没有高度，因为它只包含自身没有高度的浮动元素。

清除浮动使用

<div class="rightmenu" style="overflow:hidden;zoom:1;background-color:#ccc;">

overflow:hidden将清除firefox，safari和chrome的浮动。 zoom:1为ie6 / ie7调用hasLayout。 background-color:#ccc就是这样，你可以看到div确实包含了浮点数。

Answer 5

在不知道“leftmenu”和“rightmenu”类的作用的情况下，很难找出确切的问题，但尝试将overflow: hidden;添加到任何元素都不会浮动，但是HAS会浮动孩子。即：示例中的div.rightmenu，以及CSS中的任何其他规则。

Answer 6

这有效：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<div class="container">
    <div class="leftmenu">
        ... some stuff here ...
    </div>
    <div class="rightmenu" style="padding-bottom: 5px !ie; border: 1px solid black;">
        <div style="float: right; text-align: right;">
                <button style="display: inline-block;" class="ui-state-disabled ui-state-default ui-corner-all"> Button 1 </button>
                <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 2 </button>
                <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 3 </button>
                <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 4 </button>
        </div>
        <br style="clear: both;" />
    </div>
</div>
</body>
</html>

Answer 7

.container {
    overflow: auto;
}

诀窍。

浮动元素在IE7中从容器中删除，有时在WebKit浏览器中也是如此

7 个答案: