当前位置： 首页 > news >正文

CSS基础2

news 2025/8/12 14:19:16

浮动

 为什么要清除浮动？

 如果一个父块级元素没有设置height 或者设置 height: auto; 但是里面的所有子元素都设置float: left/right属性
 子元素就会脱离标准文档流 不在占据自己原来的位置空间,
 这些浮动子元素( 不能像之前没有设置float浮动一样,可以决定撑开父元素高度)

不能撑开块级父元素空间高度,导致父元素布局无法正常显示，
 这就是子元素浮动导致父容器高度塌陷的问题 ,这也是我们为什么要清除浮动的原因
 
 如果父元素设置了具体的高度值 那么即使 子元素添加了浮动float熟悉  父元素布局也会正常显示 不会出现父元素高度塌陷的问题 

  一个父元素(高度auto) 2个子元素能撑开父元素案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.top {background-color: pink;width: 1100px;/* height: 100px;  */height: auto; margin: 0 auto;}.left {width: 200px;height: 300px;background-color: #ccc;margin-left:10px;}.right {width: 790px;height: 300px;background-color: skyblue;margin-left:10px;margin-right:10px;}/* 块级元素宽度默认填充满父容器宽度 */.bottom {height: 100px;background-color: green;}</style>
</head>
<body><!--  块级父元素设置height: auto; 高度自适应 高度会自动调整大小以适应其内部所有子元素的高度总和  --><div class="top">父<div class="left">子1</div><div class="right">子2</div></div><div class="bottom">other</div>
</body>
</html>

 2个浮动子元素不能撑开父元素高度,导致父元素布局无法正常显示案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.top {background-color: pink;width: 1100px;/* height: 300px;  */height: auto;margin: 0 auto;}.left {float: left;width: 200px;height: 300px;background-color: #ccc;margin-left:10px;}.right {float: right;width: 790px;height: 300px;background-color: skyblue;margin-right:10px;}/* 块级元素宽度默认填充满父容器宽度 */.bottom {height: 100px;background-color: green;}</style>
</head>
<body><!-- 父子级标签, 子级浮动, 父级没有高度, 后面的其他块级标准流盒子会受影响, 显示到上面的位置  完全把这个父给盖掉--><div class="top">父<div class="left">子1</div><div class="right">子2</div></div><div class="bottom">other</div>
</body>
</html>

 

 清除浮动的方法

 ① 直接给父元素设置具体高度

如果父元素设置了具体的高度值 那么即使 子元素添加了浮动float熟悉  父元素布局也会正常显示 不会出现父元素高度塌陷的问题

  • 优点：简单粗暴，方便
  • 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
② 添加额外标签(div)法清除浮动 

这个清除浮动的 额外标签<div> 应该放在所有浮动元素之后、父容器结束标签之前。这是最标准且推荐的做法。

给这个添加的额外标签<div>块级元素设置 clear:both

注意:

这个添加的额外标签<div>必须按照上面的提示放在指定的位置。如果你把它放在其他位置（比如浮动元素前面或中间），它将无法正常清除浮动，甚至不起作用。

为什么这个添加的额外标签必须放在“浮动元素之后”？

  • clear: both; 的意思是：“不允许我这个额外标签元素左边或右边有浮动元素。”
  • 所以，只有当这个额外标签元素出现在所有浮动元素后面时，它才能起到“把浮动元素拉下来”的效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.top {background-color: pink;width: 1100px;/* height: 300px;  */margin: 0 auto;}.left {float: left;width: 200px;height: 300px;background-color: #ccc;margin-left:10px;}.right {float: right;width: 790px;height: 300px;background-color: skyblue;margin-right:10px;}/* 块级元素宽度默认填充满父容器宽度 */.bottom {height: 100px;background-color: green;}.clearfix {/* 清除左右两侧浮动的影响 */clear: both;}</style>
</head>
<body><!-- 父子级标签, 子级浮动, 父级没有高度, 后面的其他块级标准流盒子会受影响, 显示到上面的位置  完全把这个父给盖掉--><div class="top">父<div class="left">子1</div><div class="right">子2</div><div class="clearfix"></div></div><div class="bottom">other</div>
</body>
</html>

 

 ③ 使用单伪元素::after清除浮动

 /* 清除浮动，避免影响后续布局 */
        .clearfix::after {
            content: "";  // 伪元素必加的属性  
            display: block; // 伪元素默认是行内元素，需要转换成块级元素
            clear: both; //清除浮动的核心代码

   

   /*补充的代码（作用：就是在页面中看不到伪元素） 为了兼容性 */  

      height: 0;

     visibility: hidden;

        }

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.top {background-color: pink;width: 1100px;/* height: 300px;  */margin: 0 auto;}.left {float: left;width: 200px;height: 300px;background-color: #ccc;margin-left:10px;}.right {float: right;width: 790px;height: 300px;background-color: skyblue;margin-right:10px;}/* 块级元素宽度默认填充满父容器宽度 */.bottom {height: 100px;background-color: green;}/* 使用伪元素::after清除浮动   与 添加额外标签(div)法清除浮动  原理是一样的 */.clearfix::after{content: '';/* 伪元素添加的标签是行内, 要求块 */display: block;/* 清除左右两侧浮动的影响 */clear: both;/*补充的代码（作用：就是在页面中看不到伪元素） 为了兼容性 */  height: 0;visibility: hidden;}</style>
</head>
<body><!-- 父子级标签, 子级浮动, 父级没有高度, 后面的其他块级标准流盒子会受影响, 显示到上面的位置  完全把这个父给盖掉--><div class="top clearfix">父<div class="left">子1</div><div class="right">子2</div><div class="clearfix"></div></div><div class="bottom">other</div>
</body>
</html>

 

 ④  使用双伪元素（::before 和 ::after）清除浮动

使用双伪元素（::before 和 ::after）

  1.  ::after清除浮动 解决父元素高度塌陷问题
  2.  ::before解决父元素外边距塌陷现象

  使用双伪元素（::before 和 ::after）做法更全面:清除浮动解决父元素高度塌陷 解决父元素外边距塌陷问题

方法

清除浮动

(解决父元素高度塌陷)

解决父元素外边距塌陷是否推荐
单伪元素 ::after✅ 是❌ 否⚠️ 推荐一般场景
单用 overflow: hidden✅ 是✅ 是✅ 推荐
双伪元素使用 ::before + ::after✅ 是✅ 是✅✅ 强烈推荐（更严谨）

注意:

❶浮动子元素设置 margin-top  不会影响父元素的位置，也不会导致父元素外边距出现塌陷问题。

  • 浮动子元素脱离文档流,不在处于自己原来的位置空间,所以浮动子元素与父元素没有任何瓜葛了,也不会让父元素出现外边距塌陷的问题。
  • 但是会引出另一个问题就是 浮动子元素的高度不会决定父元素的高度 ,导致父元素高度(没有高度值0)塌陷问题  

❷只有非浮动子元素设置 margin-top 才会导致父元素出现外边距塌陷问题

外边距塌陷问题:

非浮动子元素设置了 margin-top往下偏移,会“穿透”到父元素外面，导致父元素也跟着向下偏移；

.top 是一个父块级元素，没有设置 height，里面的子元素设置float属性,脱离自己的标准

子元素就会脱离标准文档流 不在占据自己原来的位置空间,这些浮动子元素 不能撑开块级父元素空间高度,导致父元素布局无法正常显示， 导致父容器高度塌陷 


 

.clearfix::after {
content: '';
display: table;
clear: both;
}

在 .top 元素的内容后面插入一个虚拟元素；
设置 clear: both; 表示：“不允许我这个位置左边或右边有任何浮动元素”；由于这个虚拟元素位于所有浮动元素之后，所以它会强制把整个浮动区域“拉下来”，从而撑开父容器 .top 的高度；

.clearfix::before {

content: '';

display: table;

}

使用 ::before 解决外边距塌陷

插入一个虚拟元素在 .top 内容开始前；

设置为 display: table; 会创建一个新的 BFC（块级格式化上下文）；
这样可以防止 .left 或 .right 中的 margin-top 影响到 .top 的位置；


 

⑤ 给父元素设置overflow : hidden/auto属性

通过设置父元素的 overflow : hidden / auto 来创建一个新的块级格式化上下文（BFC），这样父元素就会包含其浮动子元素。

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.top {background-color: pink;width: 1100px;/* height: 300px;  */margin: 0 auto;overflow: hidden; /* 或 auto */}.left {float: left;width: 200px;height: 300px;background-color: #ccc;margin-left:10px;}.right {float: right;width: 790px;height: 300px;background-color: skyblue;margin-right:10px;}/* 块级元素宽度默认填充满父容器宽度 */.bottom {height: 100px;background-color: green;}</style>
</head>
<body><!-- 父子级标签, 子级浮动, 父级没有高度, 后面的其他块级标准流盒子会受影响, 显示到上面的位置  完全把这个父给盖掉--><div class="top">父<div class="left">子1</div><div class="right">子2</div></div><div class="bottom">other</div>
</body>
</html>

http://www.lqws.cn/news/97309.html

相关文章：

  • 2025 年人脸识别技术应用备案政策已落地
  • SuperMap GIS基础产品FAQ集锦(20250603)
  • 【Linux基础知识系列】第八篇-基本网络配置
  • 大数据-277 Spark MLib - 基础介绍 机器学习算法 Gradient Boosting GBDT算法原理 高效实现
  • 数字商城小程序源码，开启便捷电商新体验
  • 大数据-276 Spark MLib - 基础介绍 机器学习算法 Bagging和Boosting区别 GBDT梯度提升树
  • 【后端架构师的发展路线】
  • Elasticsearch + Milvus 构建高效知识库问答系统《一》
  • Java高级 | （二十二）快速应用开发框架——Spring Boot
  • 小白的进阶之路系列之十二----人工智能从初步到精通pytorch综合运用的讲解第五部分
  • OpenCV CUDA模块图像处理------图像融合函数blendLinear()
  • Attention Is All You Need (Transformer) 以及Transformer pytorch实现
  • 【JavaWeb】SpringBoot原理
  • SpringBoot 自定义注解实现限流
  • 【Vmware】虚拟机安装、镜像安装、Nat网络模式、本地VM8、ssh链接保姆篇（图文教程）
  • 优化 Spring Boot API 性能：利用 GZIP 压缩处理大型有效载荷
  • 托福39-1 Early Writing Systems感悟
  • Kotlin List 操作全面指南
  • RabbitMQ 监控与调优实战指南（二）
  • JavaScript性能优化实战大纲
  • Neovim - 打造一款属于自己的编辑器（一）
  • 提取 PDF 文件中的文字以及图片中的文字
  • HALCON 深度学习训练 3D 图像的几种方式优缺点
  • 论文中pdf图片文件太大怎么办
  • 关于FPGA软核的仿真（一）
  • 基于 NXP + FPGA+Debian 高可靠性工业控制器解决方案
  • 云计算 Linux Rocky day03
  • YAML文件
  • 什么是AI芯片？
  • Tailwind CSS 实战：基于 Kooboo 构建 AI 对话框页面（六）：图片上传功能