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;
    */
}