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

我有一个包含其他浮动的div一个div：如何将底部填充添加到包含浮动div的div？

< DIV ID = “父” >
<格的风格= “浮动：左;” > text </div >
< div style =“float：left;” > text </div >
< div style =“float：right;” >文本</DIV >
</DIV >

如何，我可以添加底部填充到父DIV，并使其工作在IE6（或者换句话说避免IE6的bug）？

谢谢

来源

2009-01-02 Waleed Eissa

尝试浮动父div。

来源

2009-01-02 10:07:53

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

来源

2009-01-02 10:22:47 bochgoch

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

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

来源

2009-01-02 10:55:08

这是个好建议，如果你想保持高度固定。 – sugardaddy 2015-01-09 18:38:08

在我的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，歌剧，Safari浏览器。

如何使用？

事情是这样的：

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

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

注意！ 做不是在页脚（或页面的最后一个元素）上使用clearfix类，否则在所有内容下都会有一个难看的空间。

来源

2009-01-02 12:16:08

与其他答案类似，这一个在Firefox中为我工作，并使用少一点的代码。我认为它也适用于其他浏览器，但您应该确认。

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

来源

2015-01-16 17:45:33 sugardaddy

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

回答

相关问题