CSS中的浮动、高度塌陷以及清除浮动.

最新推荐文章于 2023-06-28 20:20:31 发布

冷太阳a

最新推荐文章于 2023-06-28 20:20:31 发布

阅读量215

点赞数

分类专栏： HTML 、CSS 文章标签： css清除浮动

本文链接：https://blog.youkuaiyun.com/A_9888/article/details/102997633

版权

34 篇文章

订阅专栏

本文详细介绍了五种解决CSS浮动后塌陷问题的方法，包括给父级元素设置高度、使用overflow属性、追加clear:both标签、利用伪元素after以及结合before和after优化清除浮动，深入探讨每种方法的优缺点及适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、浮动的原因：当元素浮动后就会脱离文档流（不占空间，不在五行之中），后面没有浮动的元素就会填补上来，这样就会产生浮动后的塌陷问题。
== 解决清除浮动方法：==

1.给浮动后的父级元素加上height；（通常情况下不方便给父级元素给高度，会让父亲的高度随着孩子的高度而撑开，所有此方法不常用。）

2.给父级元素加overflow：auto；（此方法在内容增加时容易制造成不会自动换行导致内容会被隐藏，无法显示需要溢出的内容）

3.给浮动元素最后的一个标签后面再追加一个盒子，其样式为：(w3c推荐使用，但是此种方法代码量冗余不推荐使用)

clear:both

4.利用伪元素after 给父级元素追加内容：（常用）

.clearfix::after{
content:" ."（尽量用小点，不要空，以往旧版本的浏览器留空隙）
clear:both;（清除浮动）
display:block;（转换为块级）
with：0；
hight：0；（隐藏空隙）
visibility：hidden(隐藏小点)
}

5.利用before和after闭合浮动（推荐使用,设置css里面公共样式，后面直接调用）：

.clearfix:before,.clearfix:after{
content:" ";
display:table;
}
.clearfix::after{
clear:both;
}
.clearfix{
zoom:1;
}