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;
}
（👇下拉同学请看这里！！！！）
当高度塌陷是因为position设置为absolute所导致的时候，上面的四种方法除了第一种把高度写死之外，其它三种方法都是无效的。
原因：解决父元素高度塌陷的通常解决办法是在父元素中开启BFC。当子元素脱离文档流的原因是float，则可以通过开启BFC解决。但是如果子元素脱离文档流是因为absolute或者fixed，则开启BFC同样不管用。这种情况下，CSS没有办法解决，只能通过JS获取子元素的高度然后赋值给父元素来解决。
<body>
<div class="container" id="container">
<div class="box" id="box" ></div>
</div>
<script>
//拿到子元素的高度
var box=document.getElementById("box").offsetHeight;
//将子元素的高度赋予父元素
document.getElementById("container").style.height=box;
alert(box);
</script>
</body>
至此absolute导致的父元素高度塌陷问题解决👍
后来我尝试将绝对定位改为相对定位，这样相对定位子元素的位置还是会在原来的位置，不会脱离文档流。所以块还是快，内联还是内联，但是子元素会提升一个层级，相对自身的位置进行定位也是一种解决方法。
查资料的时候意外发现针对absolute的高度塌陷问题好像没什么人写，难道是因为它只能用JS解决而大神们都不屑于写这种小文章了吗？我这个前端新手怕不记下来下回又又又找不到资料了🙃
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
56
0- 0
已为社区贡献3条内容
所有评论(0)