html 高度塌陷,前端高度塌陷问题
一.产生原因
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。
二.所以在开发中一定要避免出现高度塌陷的问题,
1.我们可以将父元素的高度写死,以避免塌陷的问题出现,
但是一旦高度写死,父元素的高度将不能自动适应子元素的高度,所以这种方案是不推荐使用的。
2.根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context简称BFC,该属性可以设置打开或者关闭,默认是关闭的。
(1)当开启元素的BFC以后,元素将会具有如下的特性:
父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的子元素
(2)如何开启元素的BFC
设置元素浮动
使用这种方式开启,虽然可以撑开父元素,但是会导致父元 素的宽度丢失而且使用这种方式也会导致下边的元素上移,不能解决 问题
设置元素绝对定位
设置元素为inline-block
可以解决问题,但是会导致宽度丢失,不推荐使用这种方式
将元素的overflow设置为一个非visible的值
推荐方式:将overflow设置为hidden是副作用最小的开启BFC的方式,
但是在IE6及以下的浏览器中并不支持BFC,所以使用这种方式不能兼容IE6。在IE6中虽然没有BFC,但是具有另一个隐含的属性叫做hasLayout,属性的作用和BFC类似,所在IE6浏览器可以通过开hasLayout来解决该问题开启方式很多,我们直接使用一种副作用最小的:
直接将元素的zoom设置为1即可
zoom表示放大的意思,后边跟着一个数值,写几就将元素放大几倍
zoom:1表示不放大元素,但是通过该样式可以开启hasLayout
zoom这个样式,只在IE中支持,其他浏览器都不支持
最终兼容方案
.clearfix{
overflow: hidden;
zoom:1;
}
3.通过在高度塌陷的父元素的最后,添加一个空白的div,然后在对其进行清除浮动,但会在页面中添加多余结构
由于这个div并没有浮动,所以他是可以撑开父元素的高度的,然后在对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度,基本没有副作用,使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构。
最终方案
.clearfix{
clear: both;
}
4.通过after伪类在高度塌陷的父元素的最后,添加一个空白的块元素,然后对其清除浮动,不会再页面中添加多余结构
这样做和添加一个div的原理一样,可以达到一个相同的效果,而且不会在页面中添加多余的div,这是我们最推荐使用的方式,几乎没有副作用
.clearfix:after{
// 添加一个内容
content: "";
// 转换为一个块元素
display: block;
// 清除两侧的浮动
clear: both;
}
在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理
.clearfix{
zoom:1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
5.子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素,使用空的table标签可以隔离父子元素的外边距,阻止外边距的重叠
解决父子元素的外边距重叠
.box1:before{
content: "";
display:table可以将一个元素设置为表格显示
}
解决父元素高度塌陷
.clearfix{
zoom:1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
经过修改后的clearfix是一个多功能的既可以解决高度塌陷,又可以确保父元素和子元素的垂直外边距不会重叠
.clearfix{
zoom: 1;
}
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
html 高度塌陷,前端高度塌陷问题相关推荐
- html的高度塌陷,html高度塌陷以及定位的理解
高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲box2多高,box1就多高.此时如果子元素设置浮动,则会导致其完全脱离文档流,子元素脱离文档流将无法撑开父元素, 导致父元素的高度丢失,就是 ...
- 什么是高度塌陷 以及高度塌陷的解决办法
什么是高度塌陷? 当父元素高度自适应,子元素浮动后,造成父元素高度为0,称为高度塌陷. 高度塌陷怎么解决? 方法一:给父元素一个固定的高度 缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推 ...
- 盒子塌陷 和 margin塌陷
1,盒子塌陷 产生的原因:当父元素没设置足够大小的时候,而子元素设置了浮动的属性,子元素就会跳出父元素的边界(脱离文档流),尤其是当父元素的高度为auto时,而父元素中又没有其它非浮动的可见元素时,父 ...
- div设置一个最小高度和最大高度,但是中间可以靠内容撑开
div设置一个最小高度和最大高度,但是中间可以靠内容撑开,很简单,给div对应的css加两个代码: 1.min-height:100px;(内容不足100px时候,高度会有100px). 2.max- ...
- fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题
fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题 参考文章: (1)fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题 ...
- js设置div高度低于滚动高度时固定
今天在电脑端看csdn时,发现文章界面一般分为三大块:左边侧边栏显示用户基本信息和广告.中间文章部分.右边用户的文章专栏.整体用的是float.右边的文章position设置为fixed.左边侧边栏是 ...
- 某一列高度变化_高度近视,老了后会瞎吗?
高度近视,老了后会瞎吗? 首先大家对高度近视要有一个客观的认识.高度近视一般是超过600度以上的近视,叫做高度近视.超过1000度以上的近视,叫做超高度近视.高度近视和超高度近视最大的危害,是眼底会出 ...
- IOS15的导航栏高度和状态栏高度和tabBar高度的获取
IOS15的导航栏高度和状态栏高度和tabBar高度的获取 这都2021年11月份了.还在有人使用[UIApplication sharedApplication].keyWindow 这样过期的ap ...
- 行内元素中去掉文字的上下间距,使得文字所在元素的高度同字体高度一致的方法...
之前在p这类块元素中的文字,给line-hight=1;就可以去掉文字自带的上下间距, 像这样: 最近突然发现这个方法在行内块和块元素上好使,可当用在span或者a这类内联元素上都不好使,除了转为块元 ...
最新文章
- C语言函数不能返回局部变量的地址
- Ocelot 资源汇总
- 【渗透测试实战】PHP语言有哪些后门?以及利用方法
- python 菜鸟-Python3 集合
- 【物联网智能网关-16】成功移植SQLite(STM32 .NET MF平台)
- 剑指MBA?Acer发布全高清触控Win8平板Aspire S7
- java servlet的包下载_javax.servlet.jar下载
- 如何区分PCA PCoA NMDS LDA t-SNE?
- iphone 计算机 桌面图标不见了,Mac苹果电脑的应用程序图标消失不见了如何恢复...
- 蓝桥杯评分标准_蓝桥杯软件设计大赛自测评分标准
- 怎么从华为nova4导入计算机,华为Nova4怎么用USB连接电脑调试教程
- 倚天屠龙记君临天下_战斗系统
- 辗转相除法的原理,一看就懂,一学就会
- android unity页面关闭报错,Unity3d报错解决方案
- Silverlight是什么
- 电控系统开发工作内容梳理
- 九的九次方是多少呢?
- 友善串口助手与VSPD模拟串口传输信息
- 微信小程序(看文档写实例八)微信小程序课堂宝APP实现练习模块前台
- vue 防止页面后退
热门文章
- ξσ Dicky's GuestBook σξ
- 电脑内存条的选配与安装详述
- 转载:详解5个被误解的CPU/GPU概念
- 开发板Linux手指滑动方向,移动应用滑动屏幕方向判断解决方案,JS判断手势方向...
- 微信投票1人1票php制作,微信投票怎么刷票,微信人工投票1毛一票
- iOS中的5款小众黑科技APP!用了都舍不得卸载!
- mysql和ad的对接_对接mysql数据库遇见的一些问题
- MySQL时间戳转换
- 酷跑游戏C语言,毕业设计(论文)-跑酷游戏设计(源程序).doc
- htc t328w android4.0,Android4.0新机 HTC T328w仅售1999