前言
在文档流中,父元素的高度默认被子元素撑开,也就是说子元素多高父元素就多高。但是子元素设置浮动后,子元素就会脱离文档流,此时父元素的高度无法被子元素撑开,导致父元素的高度塌陷。由于父元素的高度塌陷,则父元素下的所有元素都会向上移动,导致页面的布局混乱或没有内容显示(一行文本的时候)。
跑马灯完整代码解析。
正常代码
<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> <div class="container"> <div class="box"></div> </div>
父元素(蓝色背景)高度被子元素(红色边框)高度撑起。
子元素设置绝对定位的代码
<style> .container { width: 300px; height: auto; background: rgb(54, 181, 219); position: relative; } .box { position: absolute; width: 200px; height: 200px; border: 2px solid rgb(247, 129, 129); } </style> <div class="container"> <div class="box"></div> </div>
当子元素添加positive:absolute;
属性后。父元素高度塌陷,高度为0。
温馨提示
因为
position
设置为absolute
而导致父元素高度塌陷的可以跳过下列四种常见的解决办法。
常见的父元素高度塌陷解决方法
1、父元素添加固定高度
添加了固定高度的父元素高度不再自适应。
2、父元素添加
overflow: hidden;
属性
当子元素有定位属性时,容器以外的部分会被裁剪掉。
3、子元素的末尾添加一个高度为0的空白div来清除浮动属性
在页面中添加无意义的div会造成代码冗余。<div class="father"> <div class="son"></div> <!-- 清除浮动属性的div --> <div style="clear: both;"></div> </div>
4、父元素中添加一个伪元素、
.box:after { content: ""; height: 0; clear: both; overflow: hidden; display: block; visibility: hidden; }
当高度塌陷是因为
position
设置为absolute
所导致的时候,上面的四种方法除了第一种把高度写死之外,其它三种方法都无效。
解决绝对定位导致的高度塌陷方法
当子元素脱离文档流的原因是
float
时,开启BFC即可解决。
子元素脱离文档流的原因是absolute
或者fixed
时,开启BFC不管用。这种情况CSS没有办法解决,只能通过JavaScript获取子元素的高度然后赋值给父元素来解决。
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
position: relative;
width: 68px;
margin: 0px auto;
background-color: cadetblue;
overflow: hidden;
}
.item {
position: absolute;
display: inline-block;
padding: 2px 0px;
color: #fff;
white-space: nowrap;
}
@keyframes anim {
0% {
left: 100%;
}
100% {
left: 0%;
transform: translateX(-100%);
}
}
</style>
<div id="idBox" class="box">
<div id="idItem" class="item"></div>
</div>
<script>
const str = '程序、编程、写代码、互联网、物联网、技术栈、程序员、工程师、软件开发、硬件开发、计算机科技、智慧电子模块';
function init(val = '更多关于我的消息,请关注“代码农”微信公众号。', speed = 150) {
let len = val.length;
idItem.textContent = val;
setTimeout(() => {
let height = idItem.offsetHeight;
let idBoxW = idBox.getBoundingClientRect().width;
let idItemW = idItem.getBoundingClientRect().width;
let duration = (idItemW * 2 + idBoxW) / speed;
duration = Math.round(duration);
idBox.style.height = height + 'px';
idItem.style.animation = `anim ${duration}s linear infinite`;
}, 0);
}
init(str);
</script>
结束语
后来尝试将绝对定位改为相对定位,相对定位子元素的位置还是会在原来的位置,不会脱离文档流。块还是快,内联还是内联,但是子元素会提升一个层级,相对自身的位置进行定位也是一种解决方法。
查资料的时候意外发现针对absolute
的高度塌陷问题好像没什么人写,难道是因为它只能用JavaScript解决,而大神们都不屑于写这种小文章了吗?