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

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中触发HasLayout行为[67]

另一种解决方法.你可以使用额外的div:

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

后添加此div.right在div.container.

但是,有更好的方法来做到这一点..clearfix在CSS中添加实用程序类:

.clearfix {
  *zoom: 1;
}

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

.clearfix::after {
  clear: both;
}

添加clearfix到类的属性div.container.