web前端之绝对定位父元素高度塌陷问题、接近完美的跑马灯、巧妙的计算速度、走马灯动画、文本滚动、清除浮动、相对定位、四舍五入、流水灯、坍塌、absolute

前言

在文档流中，父元素的高度默认被子元素撑开，也就是说子元素多高父元素就多高。但是子元素设置浮动后，子元素就会脱离文档流，此时父元素的高度无法被子元素撑开，导致父元素的高度塌陷。由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，导致页面的布局混乱或没有内容显示(一行文本的时候)。
跑马灯完整代码解析。

---

正常代码

<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解决，而大神们都不屑于写这种小文章了吗？