logo标签列表

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

css
3
我有一个包含其他浮动div的div：
文本
文本
文本
如何为父div添加底部填充，并使其在IE6中正常工作（或者换句话说，避免IE6中的错误）？
谢谢。
5个回答
5
在我的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类，否则会在所有内容下方产生丑陋的空白。

3
尝试将父级div设置为浮动。
1

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

如果您无法修复父元素的高度，则下一步我会尝试查看是否有办法从最高的子div中删除浮动。这将给父div一个实际的高度，然后底部填充应该会显示出来。

1

基本上提供IE特定填充的方框模型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>
0

类似于其他答案中的一个，这个在Firefox中对我有效，并且使用的代码更少。我认为它在其他浏览器中也很好用，但你应该确认一下。

.clearFix::after{
content: '';
display: block;
clear: both;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接