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

CSS基础2

news 来源：原创 2025/6/6 0:38:41

浮动

 为什么要清除浮动？

 如果一个父块级元素没有设置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>

相关文章：

  • 03.搭建K8S集群
  • K8S上使用helm部署 Prometheus + Grafana
  • 不动产登记区块链系统（Vue3 + Go + Gin + Hyperledger Fabric）
  • [P2P]并发模式
  • 可重复读和读提交是如何工作的？
  • iOS 电子书听书功能的实现
  • Java基础(二)：八种基本数据类型详解
  • 光伏功率预测新突破：TCN-ECANet-GRU混合模型详解与复现
  • Ⅲ-3.计算机二级选择题（三大结构之循环结构）
  • docker创建postgreSql带多个init的sql
  • 如何生成和制作PDF文件
  • 预览pdf（url格式和blob格式）
  • PDF.js无法显示数字签名
  • Leetcode-7 寻找用户推荐人
  • Electron桌面应用下，在拍照、展示pdf等模块时，容易导致应用白屏
  • 推荐一款PDF压缩的工具
  • 提取 PDF 文件中的文字以及图片中的文字
  • ​链表题解——回文链表【LeetCode】
  • 论文中pdf图片文件太大怎么办
  • 第2章_Excel_知识点笔记
  • 网站导航设计模板/百度查重工具
  • 电子商务网站建设题/常用的搜索引擎有哪些?
  • 绵阳做网站的/百度快速查询
  • 网站开发 质保金/解析域名网站
  • 微客通达推广引流/seo营销服务
  • 单位网站建设程序/seo公司推荐