absolute导致的高度塌陷问题——解决方法
前段时间写前端页面排版的时候又又又遇到了absolute导致的父元素高度塌陷的问题，以前代码写的少所以遇到问题就是查查查，问题解决后了一个漫长的学期后又遇到一样的问题又得重新查查查，所以这次索性总结一下。
什么是高度塌陷？
在文档流中，父元素的高度默认被子元素撑开的，也就是说子元素多高父元素就多高，但是当为我们子元素设置浮动以后，子元素就会完全脱离文档流，此时会导致子元素无法撑开父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，导致页面的布局混乱。
正常代码：
<html><head><style>.container{width: 300px;height: auto;background: rgb(54, 181, 219);position: relative;}.box{width: 200px;height: 200px;border: 2px solid rgb(247, 129, 129);}</style></head><body><div class="container" ><div class="box"></div></div></body>
</html>代码结果：父元素(蓝色背景）高度被子元素（红色边框）高度撑起
问题出现：当子元素添加了positive：absolute属性后。
结果：父元素高度塌陷，高度为0。
温馨提示：因为position设置为absolute而导致高度塌陷的同学可跳过下列四种常见的解决方法，因为无法解决问题（具体原因请往下拉…）
常见的高度塌陷问题的解决方法
- 给父元素添加固定高度。
（缺点：添加了固定高度的父元素高度不再自适应） - 给父元素添加属性overflow: hidden;
（缺点：当子元素有定位属性时,容器以外的部分会被裁剪掉) - 在子元素的末尾添加一个高度为0的空白 div来清除浮动属性。
（缺点：在页面中添加无意义的div会造成代码冗余）
//代码结构如下
<body><div class="father" ><div class="son"></div>//清除浮动属性的div<div style="clear: both;"></div></div>
</body>
- 给父元素中添加一个伪元素。
.父元素:after{content: "";height: 0;clear: both;overflow: hidden;display: block;visibility: hidden;}
（
本文不讲float的所有内容,只浅谈float对不同高度块之间浮动结果的规则以及父元素高度塌陷的解决方法. 首先看一个小问题,就是float会导致父容器的高度塌陷,如下代码: <head> ... 文章目录 前言 一.什么是高度塌陷? 二.高度塌陷的解决方法 1.解决方法 2.开启BFC 3.开启BFC的特点 总结 前言 本文主要介绍了高度塌陷产生的原因以及解决方法 一.什么是高度塌陷? 高度塌 ... 浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ... 高度塌陷问题 在文档流中,父元素的高度默认被子元素撑开的,也就是说子元素多高父元素就多高,但是当为我们子元素设置浮动以后,子元素就会完全脱离文档流,此时会导致子元素无法撑开父元素的高度,导致父元素的高 ... 解决父级元素高度塌陷问题的方法 参考文章: (1)解决父级元素高度塌陷问题的方法 (2)https://www.cnblogs.com/anxiaobei/p/3905187.html 备忘一下. CSS盒子塌陷及解决方法 1 盒子塌陷的原因 2 如何清除塌陷 1 盒子塌陷的原因 什么是盒子塌陷? 外部的盒子没有包裹住内部的浮动盒子,导致了盒子塌陷. 盒子高度塌陷原因? ①父元素没有设置高度(h ... 什么是高度塌陷? 当父元素高度自适应,子元素浮动后,造成父元素高度为0,称为高度塌陷. 高度塌陷怎么解决? 方法一:给父元素一个固定的高度 缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推 ... 常见的几种清除浮动(高度塌陷)的方法? 我们经常把解决高度塌陷问题叫做清除浮动. 高度塌陷问题------指父元素高度自适应(即父元素不设置高度或高度为auto,这时的父元素就靠子元素来撑开),子元素 ... 窗口缩放导致页面排版错乱的解决方法 参考文章: (1)窗口缩放导致页面排版错乱的解决方法 (2)https://www.cnblogs.com/mingdao/p/11115613.html 备忘一下 ...absolute导致的高度塌陷问题——解决方法相关推荐
最新文章
热门文章