【前端】浮动后父容器高度自适应
来源:互联网 发布:护手霜推荐 知乎 编辑:程序博客网 时间:2024/05/16 13:38
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应该没人用了吧?)
-------------------------------------------------------------------------------
原文地址:https://neveryu.github.io/guestbook/
Github: https://github.com/Neveryu
新浪微博:http://weibo.com/Neveryu
- 【前端】浮动后父容器高度自适应
- overflow:auto;子元素浮动后父容器高度自适应问题
- 子元素浮动后父级元素高度自适应高度
- 解决子元素用css float浮动后父级元素高度自适应高度
- 利用overflow属性解决子元素float浮动后父级元素高度无法自适应的问题
- div里ul li浮动之后父容器高度不能自动增加的解决方法
- ul li浮动之后父容器高度不能自动增加的解决方法
- DIV浮动后父DIV高度自动失效解决方案
- [js]css处理浮动后父元素的高度
- 子元素浮动后父元素自适应高度,ul->li标签设定宽高后overflow无效,li标签里面的内容多出内容会换行
- div布局-子容器设置浮动对于父容器高度自适应产生影响的解决办法
- css实际技巧---父div中有浮动的子div,父容器不能自适应高度,清除浮动,父容器自适应高度
- li浮动、ul自适应高度
- 三种方法解决浮动元素父容器高度自适应问题
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 关于项目跟进
- 模拟退火 (poj 2420, poj 2069)
- GridView的按下或点击选中后的效果如何去除
- 如何控制 VC 中控件间的TAB切换顺序
- 餐饮软件简单的分析和一些看法
- 【前端】浮动后父容器高度自适应
- 开始
- 互联网产品的测试
- 文件小结
- android压力测试命令monkey详解
- Mongodb亿级数据量的性能测试
- iOS中的几种数据持久化方案
- 【SpringMVC框架】前端控制器源代码分析
- 链表做的一元多项式表示及相加