CSS中之高度坍塌及解决办法

高度坍塌是什么

高度坍塌：在流式布局中十分常见。当父元素没有高度，子元素设置了float时。
原因：子元素脱离文档流，无法撑开父元素

高度坍塌的’症状’：

    <div class="content">
        123
        <div class="content-middle">
            高度坍塌问题
        </div>
        <div class="content-left">left</div>
    </div>
    //下面是CSS代码
    .content-middle{
        float: left;
        width: 100px;
        height: 100px;  
        margin: 20px;
    }
    .content{
        margin: 20px;
    }

运行

发生了什么？

• 与父元素高度margin重叠（水平没受影响）
• 被leftDIV无视，占用位置
• 无法撑开父元素的高度

这肯定不是我们想看到的情况！

怎么解决？

我这里只提供最优解决办法

.content:after{
        clear: both;
        content: '';
        display: block;
        height: 0;
    }
.content-middle{ *zoom:1; } //兼容ie触发hasLayout

使用CSS伪类选择器在其后添加一个新的’content’
并设置display: block;height: 0;clear: both;
缺一不可
优点：不用加一个div给加大浏览器负担，避免better-scroll不能使用（高度写死）,不用担心overflow:hidden隐藏的问题

效果：

问题没解决 或者想与我讨论有关问题 私聊我！