Float元素父容器在Firefox中自动撑大的方法

我们在DIV做布局的时候通常需要实现以下效果

 

div#container
div#left_column	div#right_column

 

在IE中，我们使用以下CSS即可达到目的

 

div#container  {
  border :  1px solid #000 ;
  background-color :  #ccc ;
  width :  500px ;
  padding :  10px ;
}

div#left_column,
div#right_column  {
  border :  1px solid #000 ;
  background-color :  #99CC33 ;
}

div#left_column  {
  width :  250px ;
  float :  left ;
}

div#right_column  {
  width :  200px ;
  float :  right ;
}

 

但是在Firefox中，我们发现div#container中的div元素不能将父容器撑高，当div#left_column或div#right_column中的任何一个高度改变时，在Firefox中就会发生div重叠的现象：

 

div#container

div#left_column

下面提供几种解决方案，以修复该问题。

1.给父容器使用display属性

 

div#container  {
  display :  table ;   /*  建议使用  */
   /* 或者
    display: table-cell
   */
}

 

2.浮动父容器

 

div#container  {
    display :  inline ;
}

 

3.使用Overflow属性

 

div#container  {
    overflow :  hidden ;
     /*  或者
    overflow: auto;
     */
}