解决父元素没有设置高度(自适应高度)子元素浮动造成高度无法自适应的问题

如果我们为子元素容器设置了左浮动的属性,父元素只设置宽度而高度未设置,火狐、chrome、IE8+浏览器下则会出现问题。

<style type="text/css">
.content{ border:10px solid #F00;width:150px; overflow:auto; zoom:1}
.text{ width:100px; height:100px; background:#000; float:left;}
</style>

<div class="content">
    <div class="text"></div>
</div>

效果图:

不增加此css的实际图

解决办法:
给父元素加上overflow:auto;zoom:1即可解决,其作用是清楚子元素的浮动。

.content{ border:10px solid #F00;width:150px;overflow:auto;zoom:1}
实际上我们想要的效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,787评论 1 92
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 1,069评论 0 2
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,205评论 0 1
  • Ba la la la ~ 读者朋友,你们好啊,又到了冷锋时间,话不多说,发车! 1.<!DOCTYPE...
    王饱饱阅读 411评论 0 1
  • 1. 各个浏览器默认的内外边距不同 解决:*{margin:0;padding:0;} 2. 水平居中的问题 问题...
    哓两々阅读 1,699评论 0 4