当前位置：首页 > 网页制作 > CSS > 详细页面

CSS浮动引起的高度塌陷问题

时间：2022-09-12来源：www.pcxitongcheng.com作者：电脑系统城

正常页面布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 <style>
*{
margin:0;
padding: 0;
}
.content{
width:400px;
border:1px solid #000;

}
.box{
width:200px;
height:200px;
background: greenyellow;

}
</style>

<body>
<div class="content">
<div class="box"></div>
</div>
<p>基苦阿斯蒂芬</p>
</body>

在这里插入图片描述

当给类名为.box的盒子加上浮动后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 <style>
*{
margin:0;
padding: 0;
}
.content{
width:400px;
border:1px solid #000;

}
.box{
width:200px;
height:200px;
background: greenyellow;
float: left;

}
</style>

在这里插入图片描述

可以看到页面布局已经乱了，因为元素设置浮动后会脱离文档流

解决方案

1 利用BFC(给父元素加上overflow:hidden)

**缺点：父元素溢出的元素会隐藏，可能会影响页面显示 **

1
2
3
4
5
6 .content{
width:400px;
border:1px solid #000;
overflow: hidden;

}

2 加空div

要点：
1.加上一个空的块级元素
2.对块级元素进行清除浮动，省事方法，不管理是左浮还是右浮，直接全清(clear:both)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 <style>
*{
margin:0;
padding: 0;
}
.content{
width:400px;
border:1px solid #000;
/* overflow: hidden; */

}
.box{
width:200px;
height:200px;
background: greenyellow;
float: left;

}
.clear{
clear: both;
}
</style>

<body>
<div class="content">
<div class="box"></div>
<div class="clear"></div>
</div>
<p>基苦阿斯蒂芬</p>
</body>

3 利用伪元素

要点：
1 其实和加空div的原理是一致的，唯一要记住的就是把伪元素转为块级元素(display:block)，否则会没有效果
2 还有伪元素的属性不要忘记加上(content:‘’)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35 <style>
*{
margin:0;
padding: 0;
}
.content{
width:400px;
border:1px solid #000;
/* overflow: hidden; */

}
.content::after{
content: '';
display: block; // 必须要转换为块元素
clear: both;
}
.box{
width:200px;
height:200px;
background: greenyellow;
float: left;

}
/* .clear{
clear: both;
} */
</style>

<body>
<div class="content">
<div class="box"></div>

</div>
<p>基苦阿斯蒂芬</p>
</body>