likes
comments
collection

css中不起眼的高度塌陷及其解决问题

作者站长头像
站长
· 阅读数 36

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

前言

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

高度塌陷问题

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

高度塌陷的效果

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

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

css中不起眼的高度塌陷及其解决问题

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

高度塌陷的解决方案

给父元素设置overflow: hidden;

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

css中不起眼的高度塌陷及其解决问题

底部加空盒子

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

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

属性:

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

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

css中不起眼的高度塌陷及其解决问题

万能清除法

何为万能清除法,原理与第二种差不多,都是加一个空盒子去当‘垫脚石’,只不过万能清除法用的是伪对象选择器。动态模拟空盒子,哪里需要,往哪里加。 需要注意:一定要配合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>

效果如下:高度塌陷问题解决 css中不起眼的高度塌陷及其解决问题

总结

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