height:auto firefox解决方案-优快云博客

本文探讨了在使用CSS布局时遇到的浏览器兼容性问题，特别是针对Firefox和IE的不同表现。通过实例展示了如何利用clear属性解决浮动元素导致的高度计算问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做一个网页。就会遇见firefox与iE css的兼容问题
今天俺就发现了。
父div 设置了height:auto 在IE中设置没问题，但是到firefox中父div却没有增加，，，
看网上说加入 min-height:10px; height:auto !important 但是该设置在子div出现float的时候还是不行。原因貌似是当auto计算的是非float类型的高度。所以。。。。。
没办法设置为 height:100% overflow:auto 这样就可以。不清楚回家看看详细。。。。

还有就是css太恶心了。就是一个中文符号让俺找了半天。。。晕。。。。

补充内容：
至于上面的解决方法能解决暂时的问题，但是看逻辑或者其他东西暂时看不懂，又请教了一下。对此div修改一下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
.clear { clear:both; margin:0px; top:0px}
</style>
<title>Just a test</title>

</head>
<body>
<center>


<div class="mainlogo">
mainlogo
</div>



<div class="mainBody">


<div class="mainBodyLeft">

</div>



<div class="mainBodyRight">
this is the right
</div>


// 注意这里是解决的办法。加入一个clear div clear定义在上面
<div class="clear"></div>
</div>


</center>

</body>
</html>

对与clear属性的说明：
clear：该属性的值指出了不允许有浮动对象的边。

这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除clear:both;

这个解释和可以。而且理解也可以呵呵、。就是他了、、、、当初看auto的时候里面也提到了
不认识别设置float属性的 div这样就解决了。。。。。
希望能给大家一小点点帮助呵呵以后不必为float 属性发愁了呵呵。。。