[面试常考]父元素高度坍塌的原因及其解决方法

什么是脱离文档流

  <style>
        #main{
            width: 500px;
            height: 300px;
            background-color: aquamarine;
        }
        #child1{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float: left;
        }
        #child2{
            width: 100px;
            height: 100px;
            background-color: rgb(59, 145, 236); 
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>
1
2
3
4
5
6

没浮动之前是这样的
在这里插入图片描述
child1浮动到左边, 由于浮动造成脱离文档流, 脱离文档流造成空间释放,这样就导致child2跑到child1的位置, child1覆盖了child2

父元素高度坍塌的原因

子元素浮动造成子元素脱离文档流,空间释放后,导致p标签跑到已经脱离文档流的盒子上去

解决父元素高度坍塌

用clear:both

 <style>
        #main{
            width: 500px;
            height: 
            300px;     
            background-color: aquamarine;
        }
        #child1{
            width: 100px;
            height: 100px;
            background-color: rgb(200, 154, 242);
            float: left;
        }
        #child2{
            width: 100px;
            height: 100px;
            background-color: rgb(59, 145, 236);
            float: left;
        }
        p{
            background-color: rgb(176, 176, 240);
            clear: both;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<body> 
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <p>乒乒乓乓</p>
    </div>
</body>
1
2
3
4
5
6
7

在这里插入图片描述

相关阅读:
基于条形码的WMS仓储管理系统有什么优势
使用c++17std库varaint替代varaint开源库报错处理
无人驾驶与人工驾驶的对比,人工驾驶的优缺点
短链服务如何定制域名
archlinux ssdm的使用
CLR via C#-CLR的执行模型
Spring Boot中的依赖注入和自动注入
【ZooKeeper】zookeeper源码5-ZKDatabase冷启动恢复
MySQL日期时间函数
机器人操作系统ROS（21） jetson nano安装torch tensorflow

原文地址：https://blog.csdn.net/weixin_48047636/article/details/125888120