如何将底部填充添加到包含浮动div的div？

Question

我有一个包含其他浮动div的div:

<div id ="parent">
  <div style ="float:left;"> text </ div>
  <div style ="float:left;"> text </ div>
  <div style ="float:right;" > text </ div>
</ div>

如何将底部填充添加到父div并使其在IE6中工作(或者换句话说避免IE6中的错误)？

谢谢

Answer 1

在我的CSS重置文件中,我有一个"clearfix"代码:

.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
* html .clearfix {height:1px;}

看起来很奇怪,但在所有常见的浏览器上都很棒:IE6/7,FF2/3,Opera,Safari.

如何使用？

像这样的东西:

<div class="clearfix">
    <div class="floatLeft">
        left div
    </div><!-- /.floatLeft-->

    <div class="floatRight">
        right div
    </div><!-- /.floatRight-->
</div><!-- /.clearfix-->

注意! 千万不要使用上页脚clearfix类(或在页面最后一个元素),否则你将拥有所有内容下一个丑陋的空间.