前端如何解决高度塌陷问题

高度塌陷出现原因：如果父元素不设置高度或者父元素设置最小高度，一旦内容浮动，内容不占位父元素识别不了子元素的高度，就会出现高度塌陷解决方法：方法1：给父元素加overflow:hidden(overflow:hidden可以触发BFC，BFC是一个独立的渲染区域，布局规则：浮动的元素也参与高度计算)缺点:超出父元素范围的内容会隐藏方法2：给所有浮动元素的最下方写一个空盒子，给空盒子设置clear：

@码上行动

821人浏览 · 2021-06-01 19:14:57

@码上行动 · 2021-06-01 19:14:57 发布

高度塌陷

出现原因：

如果父元素不设置高度或者父元素设置最小高度，一旦内容浮动，内容不占位 
父元素识别不了子元素的高度，就会出现高度塌陷

解决方法：

方法1：

给父元素加overflow:hidden

(overflow:hidden可以触发BFC，BFC是一个独立的渲染区域，
布局规则：浮动的元素也参与高度计算)

缺点:超出父元素范围的内容会隐藏

方法2：

给所有浮动元素的最下方写一个空盒子，给空盒子设置clear：both，让盒子在所有浮动元素的下方显示，就可以把父元素的高度撑起来

缺点:无意义的空盒子会造成代码的冗余

方法3：
万能清除法

.clear_fix:after{
	content: ".";
	height: 0px;
	visibility: hidden;占位隐藏
	display: block;
	clear: both;
}
.clear_fix{
	*zoom:1;
}

万能清除法代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        *{margin:0;padding:0;}
            .header,.footer{
            height: 200px;
            background: #ccc;
        }
        .content{
            width: 1000px;
            margin:0 auto;
            background: orange;
            border:10px solid #000;
            /* 给父元素设置最小高度 */
            min-height: 500px;
            _height: 500px;
        }
        .left{
            width: 200px;
            height: 400px;
            background: #00FFFF;
            font-size: 50px;
            float: left;
        }
        .right{
            width: 200px;
            height: 1800px;
            background: pink;
            font-size: 50px;
            float: right;
        }
        .clear{
            /* 空盒子的高度设为0 */
            height:0px; 
            /* 给浮动元素下面加的空盒子清除浮动 */
            clear:both; 
        }
        /* 万能清除法 */
        .clear_fix:after{ 
            content: ".";
            height: 0px;
            visibility: hidden;
            display: block;
            clear: both;
        }
        </style>
</head>
<body>
    <div class="header"></div>
    <div class="content clear_fix">万能清除法
    <div class="left">left</div>
    <div class="right">right</div>
    <!-- <div class="clear"></div> -->空盒子
    </div>
    <div class="footer"></div>
</body>
</html>

总结

以上是对前端如何解决高度塌陷问题的小总结，后期将继续更新html基础知识点
文章为原创内容，要是遇到有不合适的地方欢迎赐教🙌

技术共进，成长同行——讯飞AI开发者社区

更多推荐

论文笔记：AlphaEdit: Null-Space Constrained Knowledge Editing for Language Models（AlphaEdit）

论文发表于人工智能顶会ICLR（基于定位和修改的模型编辑方法（针对和等）会破坏LLM中最初保存的知识，特别是在顺序编辑场景。为此，本文提出AlphaEdit：1、在将保留知识应用于参数之前，将扰动投影到保留知识的零空间上。2、从理论上证明，这种预测确保了在查询保留的知识时，编辑后的LLM的输出保持不变，从而减轻中断问题。3、对各种LLM（包括LLaMA3、GPT2XL和GPT-J）的广泛实验表明，