如何让含左浮动子div的父div高度自适应子元素？

嗨，这个问题我碰到好多次了！浮动元素会脱离正常的文档流，导致父容器没法感知到它们的高度，所以才会出现高度塌陷的情况。给你几个不用固定高度的解决方案，按需选择就行：

方案1：伪元素清除浮动（经典兼容方案） #

这是最传统也最兼容的方法，通过给父容器添加伪元素来“包裹”住浮动子元素：

.whole-message-wrapper { 
    width: 100%;
    /* 添加伪元素清除浮动 */
    &::after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
    }
    .message-info-wrapper { 
        background-color: yellow; 
        float: left; 
        width: 5%; 
        .message-icons { 
            .message { } 
            .attachment { } 
        } 
    } 
    .message-wrapper { 
        background-color: red; 
        float: left; 
        width: 95%; 
    } 
}

原理是通过伪元素生成一个空的块级元素，用clear: both清除左右浮动，让父容器能正确计算内部元素的总高度，适配所有浏览器。

方案2：触发BFC（简洁快速方案） #

只需要给父容器加一行CSS，触发块级格式化上下文（BFC），BFC会自动包含内部的浮动元素：

.whole-message-wrapper { 
    width: 100%;
    overflow: auto; /* 也可以用 overflow: hidden; */
    .message-info-wrapper { 
        background-color: yellow; 
        float: left; 
        width: 5%; 
        .message-icons { 
            .message { } 
            .attachment { } 
        } 
    } 
    .message-wrapper { 
        background-color: red; 
        float: left; 
        width: 95%; 
    } 
}

注意：overflow: hidden会裁剪超出父容器的内容，overflow: auto则会在内容溢出时显示滚动条，根据你的需求选择即可。

方案3：改用Flexbox布局（现代推荐方案） #

如果不需要兼容IE9及以下的老旧浏览器，直接用Flex布局是最省心的——完全不用浮动，天然支持高度自适应：

.whole-message-wrapper { 
    width: 100%;
    display: flex; /* 开启flex布局 */
    .message-info-wrapper { 
        background-color: yellow; 
        width: 5%; 
        .message-icons { 
            .message { } 
            .attachment { } 
        } 
    } 
    .message-wrapper { 
        background-color: red; 
        flex: 1; /* 自动占据剩余空间，替代原来的95%宽度 */
    } 
}

Flex布局下，父容器默认会匹配最高子元素的高度，后续调整布局（比如对齐方式、间距）也更灵活，这是现在前端开发的首选方案。

内容的提问来源于stack exchange，提问作者mohsinali1317