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轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 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代码
2008/09/10 PHP
php中session退出登陆问题
2014/02/27 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
Python 除法小技巧
2008/09/06 Python
python读取csv文件示例(python操作csv)
2014/03/11 Python
python3 shelve模块的详解
2017/07/08 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python3 map函数和filter函数详解
2019/08/26 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
打架检讨书50字
2014/01/11 职场文书
优秀实习生感言
2014/03/01 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
与死神共舞观后感
2015/06/15 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
2019入党申请书格式
2019/06/25 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏