Css 在IE7中，浮动元素从容器中脱落，有时在WebKit浏览器中也是如此_Css_Webkit_Cross Browser_Internet Explorer 7

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

css

Css 在IE7中，浮动元素从容器中脱落，有时在WebKit浏览器中也是如此,css,webkit,cross-browser,internet-explorer-7,Css,Webkit,Cross Browser,Internet Explorer 7,我有下面的CSS代码，我的浮动正在从它们的容器中脱落。Firefox没有这个问题。这种行为的原因是什么 <div class="container"> <div class="leftmenu"> ... some stuff here ... </div> <div class="rightmenu"> <div style="float: right; text-align: rig

我有下面的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>


... 这里有些东西。。。
按钮1
按钮2
按钮3
按钮4

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

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

“清除两个”样式从左侧和右侧结束浮动。在浮动元素之后放置清除，通过终止容器父元素内的浮动效果来防止浮动泄漏。

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

不管怎样，浮动两个子块的容器都很常见。有一些方法可以解决这个问题。考虑QuirksMode最佳的方法。所以，为了解决您的问题，只需将其添加到CSS文件中

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

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

另一项工作。您可以使用一个额外的div：

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

将

clearfix

添加到

div.container

的class属性中

在某些罕见的情况下

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

并在代码中使用它

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


... 这里有些东西。。。
... 这里有些东西。。。

div right菜单没有高度，因为它只包含本身没有高度的浮动元素

要清除浮子，请使用

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

溢出：隐藏将清除firefox、safari和chrome的浮动。

zoom:1

调用ie6/ie7。

背景色：#ccc

只是为了让您可以看到div确实包含浮点数。

如果不知道“leftmenu”和“rightmmenu”类的作用，很难解决您的确切问题，但请尝试添加

overflow:hidden到任何元素都不是浮动的，而是浮动的子元素。i、 例如：示例中的div.right菜单，以及CSS中的任何其他规则。
这可以：
<?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>


... 这里有些东西。。。
按钮1
按钮2
按钮3
按钮4



很有趣。Firefox也应该出现这种情况。似乎没有人明白问题出在哪里。浮子从哪个容器中掉落？下面的两个解决方案将修复“rightmenu”崩溃的问题，但要么您应用了错误的解决方案，要么我们都回答了错误的问题。你有到现场的链接吗？艾米丽说得对。一个活的网站或者至少一个完整的例子会非常有帮助。至少你可以提供一些屏幕截图。同意。我认为一些浏览器中的示例屏幕截图对我们大家都有很大帮助，或者可以链接到一个实时站点。不清楚。无论如何，浮动框从流中取出，因此它不会影响其周围的块级别框，并且从容器中掉落是正常的。当然，在任何浏览器中。你应该更好地解释你的问题。如果它只出现在IE中，它可能不是一个浮点数，而是一个宽度问题……给容器一个明确的宽度对我来说是关键。非常有用的回答，谢谢！宽度似乎也适合我！优雅的回答@nil
<div class="rightmenu" style="overflow:hidden;zoom:1;background-color:#ccc;">

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

.container {
    overflow: auto;
}