浮动元素在 IE7 中从容器中掉出，有时也在 WebKit 浏览器中答案

【问题标题】：Floating elements dropping out of container in IE7 and sometimes in WebKit browsers too浮动元素在 IE7 中从容器中掉出，有时也在 WebKit 浏览器中
【发布时间】：2010-12-02 06:01:51
【问题描述】：

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

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

【问题讨论】：

有趣。它也应该发生在 Firefox 中。
似乎没有人理解问题所在。漂浮物是从哪个容器中掉出来的？下面的几个解决方案将解决“rightmenu”崩溃的问题，但要么您应用它们错误，要么我们都在回答错误的问题。您有指向实时网站的链接吗？
艾米丽说得对。一个实时站点或至少一个完整的示例将非常有帮助。至少你可以提供一些屏幕截图。
同意。我认为几个浏览器中的一些示例屏幕截图会对我们所有人都有很大帮助，或者是指向实时网站的链接。
-1 回答这个问题。目前还不清楚。无论如何，一个浮动的盒子是从流中取出的，所以它不会影响它周围的块级盒子，它从容器中掉出来是正常的。当然，在任何浏览器中。你应该更好地解释你的问题。如果它只出现在 IE 中，它可能不是浮点数而是宽度问题...

标签： css webkit cross-browser internet-explorer-7

【解决方案1】：

容器，在你的例子中是“div.container”，一旦它的孩子被浮动，将无法计算它自己的正确高度。如果有任何未浮动的子块，容器将使用其中最高的块的高度。

两个子块都浮动的容器很常见。有一些方法可以解决这个问题。最好考虑一下 QuirksMode 总结的方法。 http://www.quirksmode.org/css/clearing.html

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

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

注意：宽度值可以是您想要的任何值。但必须触发IE中的HasLayout行为[67]

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

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

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

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

.clearfix {
  *zoom: 1;
}

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

.clearfix::after {
  clear: both;
}

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

【讨论】：

给容器一个明确的宽度是我的关键。非常有帮助的答案，谢谢！
宽度似乎也适合我！优雅的答案@nil

【解决方案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>

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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 确实包含浮点数。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案7】：

.container {
    overflow: auto;
}

成功了。

【讨论】：