css - 如何将底部填充添加到包含 float div 的 div？

Question

我有一个包含其他 float 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 类，否则所有内容下方都会有一个丑陋的空间。