这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战

前言

大家好，我是不吃鱼d猫，前面已经给大家整理了好玩的css项目，大家在写css是否碰到高度塌陷的问题，就是子元素浮动后不占位，父元素识别不了内容的高度，导致父元素高度塌陷。从而导致页面布局混乱。

高度塌陷问题

子元素浮动后不占位，脱离文档流，父元素识别不了内容的高度，叫高度塌陷 带来的结果：由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱

高度塌陷的效果

此前我们要说说最小高度 min-height为优化高度，如果内容超出盒子高度，min-height会使内容撑开盒子，如果内容不超出，盒子高度还是当前设置的值 结构如下：

  <div class="box">
        <div class="box1">left</div>
        <div class="box2">right</div>
    </div>

左边盒子与有右边盒子都已经浮动了，脱离文档流了，父元素设置了最小高min-height但是此时，子元素的高度超出了父元素的高度，父元素高度塌陷了，此时影响了页面的布局。

高度塌陷的解决方案

给父元素设置overflow: hidden;

解决方法：父元素设置overflow: hidden;overflow的其他属性值都可以，visiable除外 原理：父元素设置overflow: hidden; 会触发BFC（是一个独立的渲染区域，有自己的布局规则，浮动元素也参与高度计算） 效果如下：高度塌陷问题解决

底部加空盒子

解决方法：在所有浮动元素最小方设置一个空盒子，清除浮动，把父元素撑开。形象的可以理解为给浮动的子元素加了个垫脚石撑着。

<div class="box ">
        <div class="box1">left</div>
        <div class="box2">right</div>
        <div class="clear"></div>
    </div>

属性：

 .clear {
            height: 0px;//高度为0，不影响其他高度
            clear: both;//清除浮动
        }

效果如下：高度塌陷问题解决

万能清除法

何为万能清除法，原理与第二种差不多，都是加一个空盒子去当‘垫脚石’，只不过万能清除法用的是伪对象选择器。动态模拟空盒子，哪里需要，往哪里加。 需要注意：一定要配合content使用，不管写不写内容。

//语义化严重，咋clear-fix后面加一个空盒子，所以哪里需要，就在哪里加一个选择器clear-fix.
 .clear-fix::after {
            content: " ";//伪类元素内容为空
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }

用法如下：

  <div class="box clear-fix ">
        <div class="box1">left</div>
        <div class="box2">right</div>
    </div>

效果如下：高度塌陷问题解决

总结

万能清除法 推荐使用，最好用，兼容性也强。哪里需要加哪里。方便，不用就丢在样式表里面，没有影响。