float div闭合、清除浮动、自适应高度的方法
本文小编为大家详细介绍"float div闭合、清除浮动、自适应高度的方法",内容详细,步骤清晰,细节处理妥当,希望这篇"float div闭合、清除浮动、自适应高度的方法"文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
①例如:<#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" >这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)
这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在 <#div class="floatB"> <#div class="NOTfloatC">之间加上 <#div class="clear">这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。 并且将clear这种样式定义为为如下即可: .clear{ clear:both;}
②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这 样就达到了兼容。
例如某一个wrapper如下定义:
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
读到这里,这篇"float div闭合、清除浮动、自适应高度的方法"文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注行业资讯频道。