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

【问题标题】：How to add bottom padding to a div that contains floating divs?如何将底部填充添加到包含浮动 div 的 div？
【发布时间】：2010-09-29 05:10:48
【问题描述】：

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

文本

如何向父 div 添加底部填充并使其在 IE6 中工作（或者换句话说，避免 IE6 中的错误）？

谢谢

【问题讨论】：

标签： css

【解决方案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 类，否则您将在所有内容下有一个丑陋的空间。

【讨论】：

【解决方案2】：

尝试浮动父 div。

【讨论】：

【解决方案3】：

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

<!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>

【讨论】：

【解决方案4】：

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

如果您无法修复父级的高度，我接下来要做的就是看看是否有办法从最高的子级 div 中移除浮动。这将为父 div 提供一个实际高度，然后底部填充应该显示出来。

【讨论】：

【解决方案5】：

与其他答案之一类似，这个答案在 Firefox 中对我有用，并且使用的代码更少。我认为它在其他浏览器中也可以正常工作，但您应该确认。

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

【讨论】：