【前端】浮动后父容器高度自适应
2015-07-21 08:40
281 查看
float:left;
overflow:hidden;
当一个容器内元素都浮动后,它将高度将不会随着内部元素高度的增加而增加,所以造成内容元素的显示超出了容器。
在我们没有为容器设置高度的时候,容器的高度是自适应的。然而,当容器中的元素都浮动以后,脱离了文档流,容器的高度由于自适应的原因就为0了。
为了方便大家观察,我为父容器设置了边框,内间距。原本上面四张图片是在上面的容器中的,将图片设置左浮动以后,容器的高度就为0了。
Q1:这会为我们带来什么影响?
A1:浏览器在解析下一个容器的时候,默认是接着上一个容器的。这样就会与图片有重叠部分,这样显然很糟糕。
那么,如何解决这种问题呢?
A1:我们可以设置父容器的高度。height:200px;
A2:我们可以用很多换行符来撑起这个父容器。<br/><br/><br/>
第一种方法的可扩展性不好,大家都懂的,固定了高度以后,就比较死板了。
第二种方法逼格比较低,大家都懂的,而且意义也不大。(不过我以前经常用,挺爽的)
所以,就有了下面的这一种方法:
overflow:auto; zoom:1;
overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6而写(此样式不能通过W3C验证)。
这就是所谓的css hack,由于不同的浏览器,比如IE 6,IE 7,IE8,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的CSS
code的过程,就叫CSS hack。这里的overflow:auto; zoom:1;就是所谓的css hack,这种形式是应用我们常用的代码来解决不兼容问题,也会用到添加一些特殊符号的形式,它本身没有意义,只是针对不同浏览器是否对它识别来实现的。
另外补充一个IE6双倍边距的问题.大家如果遇到了,就用display:inline;(现在IE6应该没人用了吧?)
-------------------------------------------------------------------------------
希望大家多支持,有大家的支持,我才能走得更远,谢谢!
------------------------------------------------------------
联系方式,新浪微博:http://weibo.com/Neveryu
更多学习资源请私信我的新浪微博...
推荐微博:彻底被毕业的婷婷
快捷入口:王婷婷 ;
overflow:hidden;
当一个容器内元素都浮动后,它将高度将不会随着内部元素高度的增加而增加,所以造成内容元素的显示超出了容器。
在我们没有为容器设置高度的时候,容器的高度是自适应的。然而,当容器中的元素都浮动以后,脱离了文档流,容器的高度由于自适应的原因就为0了。
为了方便大家观察,我为父容器设置了边框,内间距。原本上面四张图片是在上面的容器中的,将图片设置左浮动以后,容器的高度就为0了。
Q1:这会为我们带来什么影响?
A1:浏览器在解析下一个容器的时候,默认是接着上一个容器的。这样就会与图片有重叠部分,这样显然很糟糕。
那么,如何解决这种问题呢?
A1:我们可以设置父容器的高度。height:200px;
A2:我们可以用很多换行符来撑起这个父容器。<br/><br/><br/>
第一种方法的可扩展性不好,大家都懂的,固定了高度以后,就比较死板了。
第二种方法逼格比较低,大家都懂的,而且意义也不大。(不过我以前经常用,挺爽的)
所以,就有了下面的这一种方法:
overflow:auto; zoom:1;
overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6而写(此样式不能通过W3C验证)。
这就是所谓的css hack,由于不同的浏览器,比如IE 6,IE 7,IE8,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的CSS
code的过程,就叫CSS hack。这里的overflow:auto; zoom:1;就是所谓的css hack,这种形式是应用我们常用的代码来解决不兼容问题,也会用到添加一些特殊符号的形式,它本身没有意义,只是针对不同浏览器是否对它识别来实现的。
另外补充一个IE6双倍边距的问题.大家如果遇到了,就用display:inline;(现在IE6应该没人用了吧?)
-------------------------------------------------------------------------------
希望大家多支持,有大家的支持,我才能走得更远,谢谢!
------------------------------------------------------------
联系方式,新浪微博:http://weibo.com/Neveryu
更多学习资源请私信我的新浪微博...
推荐微博:彻底被毕业的婷婷
快捷入口:王婷婷 ;
相关文章推荐
- jquery 2.0.3代码结构
- HTML学习笔记——post表单
- HTML学习笔记——列表和table
- Bootstrap网站模板
- HTML学习笔记——图片显示、图片跳转、图片相对路径
- React Native开发的通讯录应用
- HTML学习笔记——锚链接、pre标签、实体
- 前端页面——AJAX是个什么样的传输机
- ideaIU14.4配置coco 4000 s2d-js环境
- HTML学习笔记——head、body及简单标签
- 关于Mysql错误:./bin/mysqld_safe --user=mysql& [1] 32710 121003 16:40:22 mysqld_safe Logging to '/var/log/mysqld.log'. 121003 16:40:22 mysqld_s
- [Leetcode 24, Medium] Swap Nodes in Pair
- Childlife旗下三驾马车
- Meteor 前端 RESTful API 通过后端 API 下载文件
- JSON概述
- 使用CSStickyHeaderFlowLayout实现头部固定的CollectionView
- html圈圈
- html+css基础课程总结1
- JavaScript高级——事件监听控制
- html中字符转义