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 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 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,ajax实现分页
2008/03/27 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
PHP7新增函数
2021/03/09 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
jQuery 性能优化指南(3)
2009/05/21 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
谈谈JS中的!!
2017/12/07 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
Vue表单控件绑定图文详解
2019/02/11 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
利用python求相邻数的方法示例
2017/08/18 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
Pandas的数据过滤实现
2021/01/15 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
关于VPN
2012/06/10 面试题
高中物理教学反思
2014/02/08 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
工程移交协议书
2016/03/24 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs