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

什么是脱离文档流

  <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

在这里插入图片描述

相关阅读:
伦敦金区间操作容易碰到的问题
C高级 Linux中的文件相关指令
力扣：116. 填充每个节点的下一个右侧节点指针（Python3）
一文讲清楚webpack和vite原理
策略模式优雅实践
蓝牙认证检测实验室授权政策与认可要求解析
Linux·socket编程
【C++】单例模式【两种实现方式】
ROS stm32 CAN通信
更换Anaconda的下载源为国内源的办法

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