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

我有以下CSS代码,我的浮动正从容器中删除.Firefox没有这个问题.这种行为可能是什么原因？

    

        ... some stuff here ...
    
    

        

             Button 1 
             Button 2 
             Button 3 
             Button 4 
        
    

nil.. 9

容器(在您的情况下为"div.container")一旦其子项浮动,将无法计算其自身的正确高度.如果有任何子块未浮动,则容器将使用其中最高的子块.

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

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

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

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

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

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

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

.clearfix {
  *zoom: 1;
}

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

.clearfix::after {
  clear: both;
}

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

容器(在您的情况下为"div.container")一旦其子项浮动,将无法计算其自身的正确高度.如果有任何子块未浮动,则容器将使用其中最高的子块.

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

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

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

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

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

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

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

.clearfix {
  *zoom: 1;
}

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

.clearfix::after {
  clear: both;
}

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