首页 / HTML / html如何解决高度塌陷问题
html如何解决高度塌陷问题
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了html如何解决高度塌陷问题,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1855字,纯文字阅读大概需要3分钟。
内容图文
![html如何解决高度塌陷问题](/upload/InfoBanner/zyjiaocheng/392/918d7195e651468aab78236921988998.jpg)
高度塌陷的问题:
当开启元素的BFC以后,元素将会有如下的特性:
1 父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的子元素
那么如何开启元素的BFC?
设置元素浮动
设置元素绝对定位
设置元素为inline-block
float:left; (不好) 虽然可以撑开父元素 会导致父元素宽度丢失了;而且使用这种方式导致下边的元素上移。
display:inlink-block; 布局好了,但是宽度又没有了。但是会导致宽度丢失,不推荐使用这种方式。
元素的overflow 设置非visible值:
overflow:auto; 解决父元素高度塌陷 副作用最小的。
兼容性
在IE6中没有BFC, 但是具有另一个隐含的属性叫hasLayout.
该属性的作用和BFC类似,所在IE6浏览器通过开启hasLayout来解决问题。
方式:
元素的zoom设置为1即可:zoom:1
在 IE6中如果为一个元素指定了一个宽度,则会默认开启一个
hasLayout.
clear: both 清楚对他影响最大的那个元素的浮动
解决高度塌陷的方案二
可以直接在高度塌陷的父元素的最后,添加一个空白的div
由于这个div并没有浮动,他是可以撑开父元素高度的
然后对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度,基本没有副作用
虽然可以解决问题啊,但是在页面中添加多余的结构。
通过after伪类 设置为块级元素 清除两边浮动 解决父类塌陷的问题
通过after伪类,选中box1的后边
.box1:after{ content:""; display:block; //清除两侧的浮动 clear:both; } /* IE6不支持伪类。 zoom:1;*/ .clearfix:after{ /*添加一个内容*/ content:""; /*转换为一个块元素*/ display:block; /*清除两侧的浮动*/ clear:both; } /*在IE6中不支持after伪类, 所以在IE6中还需要使用hasLayout来处理*/ .clearfix{ zoom:1; }
IE6中如果上面的是内联元素 也是浮不上去的
终极版:
//经过修改后的clearfix是一个多功能的
//既可以解决高度塌陷,又可以确保父元素
和子元素的垂直外边距重叠
.clearfix:before, .clearfix:after{ content:""; display:table; clear:both; }
以上就是html如何解决高度塌陷问题的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的html如何解决高度塌陷问题全部内容,希望文章能够帮你解决html如何解决高度塌陷问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。