HTML5之高度塌陷问题的解决


Posted in HTML / CSS onJune 01, 2022

所谓的高度塌陷,意即当给子元素设置浮动时,其父元素高度会丢失的情况。通过实际代码进行演示:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            width: 100%;
            background-color: #ccc;
        }
        
        .one {
            float: left;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        
        .two {
            float: right;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
        
        section {
            width: 400px;
            height: 400px;
            background-color: orange;
        }
    </style>
</head>
 
<body>
    <main>
        <div class="one"></div>
        <div class="two"></div>
    </main>
    <section></section>
</body>
 
</html>

初始时的效果,高度出现塌陷,下部的橘色模块会上移。现给出五种解决方案:

HTML5之高度塌陷问题的解决

一、给父元素设置固定高度,虽然简便,但不推荐使用,因为网页的内容是动态变化的,给定高度不利于后期内容增添。

给main父级加上高度,设为200px即可

HTML5之高度塌陷问题的解决

对应运行结果:

HTML5之高度塌陷问题的解决

二、将父元素的overflow设为一个非visible值,适用于子元素未溢出的情形。这里给main设置overflow:hidden,效果同上图一样

HTML5之高度塌陷问题的解决

对应运行结果:

HTML5之高度塌陷问题的解决

三、利用clear属性清除浮动影响。

先于main中添加一个类名为box的空div标签,再于style中设置其clear属性,实现效果同上

HTML5之高度塌陷问题的解决

HTML5之高度塌陷问题的解决

对应运行结果:

HTML5之高度塌陷问题的解决

四、利用after伪类给父级添加一个空块级内容,并设置clear属性

这种方法可以看作是第三种方法的优化,因为一个空标签其实是比较多余的,可以通过after伪类进行添加。添加下图代码后,便能解决问题。

HTML5之高度塌陷问题的解决

对应运行结果:

HTML5之高度塌陷问题的解决

五、直接使用clearfix类,引入以下代码

HTML5之高度塌陷问题的解决

之后向main添加clearfix类即可

HTML5之高度塌陷问题的解决

对应运行结果:

HTML5之高度塌陷问题的解决

到此这篇关于HTML5之高度塌陷问题的解决的文章就介绍到这了,更多相关HTML5高度塌陷内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 #HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 #HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 #HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 #HTML / CSS
html中相对位置与绝对位置的具体使用
CSS 左边固定宽右边自适应的6种方法
May 15 #HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 #HTML / CSS
You might like
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
javascript连续赋值问题
2015/07/08 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
用Python编写简单的微博爬虫
2016/03/04 Python
python实现杨辉三角思路
2017/07/14 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
测绘工程个人的自我评价
2013/11/10 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
校园之星获奖感言
2014/01/29 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
绿色小区申报材料
2014/08/22 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
个人租房协议书
2014/11/28 职场文书
党员个人自我评价
2015/03/03 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
法制工作总结2015
2015/07/23 职场文书
用python自动生成日历
2021/04/24 Python
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript