登录  /  注册

html如何解决高度塌陷问题

青灯夜游
发布: 2018-09-21 18:01:58
原创
4244人浏览过

本章给大家介绍html如何解决高度塌陷问题。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

高度塌陷的问题:
当开启元素的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如何解决高度塌陷问题的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号