Question

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

＆lt; div id =“parent”＆gt;
＆lt; div style =“float：left;”＆gt; text＆lt; / div＆gt;
＆lt; div style =“float：left;”＆gt; text＆lt; / div＆gt;
＆lt; div style =“float：right;”＆gt; text＆lt; / div＆gt;
＆LT; / DIV＆GT;

如何将底部填充添加到父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-->

<强>注意！ NOT 在页脚上使用clearfix类（或在页面的最后一个元素中），否则在所有内容下都会有一个丑陋的空间。

Answer 2

尝试浮动父div。

Answer 3

基本上提供IE特定填充的box model hack应该有帮助

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>demo</title>

<style type="text/css">
<!-- 
div {
height:100px;
border:1px solid black;
padding-bottom:10px;
}
div {
\height: 140px;
h\eight: 100px;
}  
-->
</style>

</head>
<body>

<div id="parent" style="float:left;">
  <div style="float:left;">text</div>
  <div style="float:left;height:100px">text</div>
  <div style="float:right;">text</div>
</div>
</body>
</html>

Answer 4

当所有子项都浮动时，IE似乎没有计算父级的高度。如果您可以通过向父级应用固定高度，则可以添加底部填充。

如果你无法修正父母的身高，我接下来要做的就是看看有没有办法从最高的孩子div中移除浮子。这将给父div一个实际高度，然后底部填充应该出现。

Answer 5

与其他答案类似，这个在Firefox中适用于我，并且使用的代码更少。我认为它在其他浏览器中运行良好，但你应该确认。

.clearFix::after{
content: '';
display: block;
clear: both;
}

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

5 个答案: