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

CSS的浮动（下）

news 2025/12/26 7:10:06
🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍CSS的浮动相关知识。知识学习内容来自b站的@黑马程序员的视频

😃1 浮动的两个注意

🔥第一条. 浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

🔥第二条. 一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，防止引起问题。并且浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

😃2 为什么清除浮动

原因：有些情况父盒子是没有高度的；或者不知道父盒子内部具体有多少内容。这时就需要让孩子盒子撑开父盒子，两者高度一致。

可是我们之前又说，要浮动才能让子孩子在一行显示，而浮动是不占据位置的，所以这样又会导致父盒子高度为0（见下图）

<!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>.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.left {float: left;width: 300px;height: 200px;background-color: purple;}.right {float: left;width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="box"><div class="left"></div><div class="right"></div></div>
</body></html>

为了解决这种问题， 我们就需要清除浮动

😃3 清除浮动的本质与方法

清楚浮动的本质就是清除浮动元素造成的影响。如果父盒子本身有高度就不需要清除浮动，但是清除浮动后，父级盒子就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流了。

🔥额外标签法

在所有浮动元素最后面加上一个块级的空的盒子，这个空的盒子添加一个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>.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.left {float: left;width: 300px;height: 200px;background-color: purple;}.right {float: left;width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: black;}.clear {clear: both;}</style>
</head><body><div class="box"><div class="left"></div><div class="right"></div><div class="clear"></div></div><div class="footer">底层</div>
</body></html>

缺点：结构化差，不常用

🔥父元素添加overflow

为父元素添加overflow:hidden，缺点是无法显示溢出的部分。

🔥：after伪元素法

现阶段只需要会用就可以了。

就是把这段代码复制粘贴，然后那个父元素要去掉浮动添加这个类就可以了

.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
<!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>.clearfix::after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {*zoom: 1;}.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.left {float: left;width: 300px;height: 200px;background-color: purple;}.right {float: left;width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: black;}</style>
</head><body><div class="box clearfix"><div class="left"></div><div class="right"></div></div><div class="footer">底层</div>
</body></html>

🔥双伪元素法

也是给父元素添加，同样的只要复制粘贴下面的代码给父元素

.clearfix::before,
.clearfix::after {
content: "";
display: table;
}

.clearfix::after {
clear: both;
}

.clearfix {
*zoom: 1;
}
<!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>.clearfix::before,.clearfix::after {content: "";display: table;}.clearfix::after {clear: both;}.clearfix {*zoom: 1;}.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.left {float: left;width: 300px;height: 200px;background-color: purple;}.right {float: left;width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: black;}</style>
</head><body><div class="box clearfix"><div class="left"></div><div class="right"></div></div><div class="footer">底层</div>
</body></html>

😃4 总结

清除浮动原因：父级没高度；子盒子浮动了；影响下面的布局了。就应该清除浮动

清除浮动方法：

清除浮动的方式

优点

缺点

额外标签法

通俗易懂，书写方便

添加许多无意义的标签，结构化较差

父级overflow:hidden

书写简单

溢出隐藏

父级after元素

结构语义化正确

兼容性问题

父级双伪元素

结构语义化正确

兼容性问题

相关文章：

CSS的浮动（下）

&#x1f31f;所属专栏&#xff1a;前端只因变凤凰之路&#x1f414;作者简介&#xff1a;rchjr——五带信管菜只因一枚&#x1f62e;前言&#xff1a;该系列将持续更新前端的相关学习笔记&#xff0c;欢迎和我一样的小白订阅&#xff0c;一起学习共同进步~&#x1f449;文章简…...

编程日记 2023/4/13 18:28:53

软件测试-性能测试流程

压测任务具体包含： 0.前期准备 尽量参与业务需求评审，可以对业务有更深入的了解，了解哪些功能是核心功能，哪些可能存在性能瓶颈，以便在性能需求评审的时候能给出有建设性的意见 1.性能需求分析、评审 明确测试范围（哪些业务接口）、目标（tps、rt、成功率） 关于性能需…...

编程日记 2023/4/18 23:24:37

【python实操】年轻人，别用记事本保存数据了，试试数据库吧

为什么用数据库&#xff1f; 数据库比记事本强在哪&#xff1f; 答案很明显&#xff0c;你的文件很多时候都只能被一个人打开&#xff0c;不能被重复打开。当有几百万数据的时候&#xff0c;你如何去查询操作数据&#xff0c;速度上要快&#xff0c;看起来要清晰直接 数据库比我…...

编程日记 2023/3/28 6:43:33

铁威马NAS教程之利用docker快速搭建个人在线书库

这是一个基于Calibre的简单的图书管理系统&#xff0c;支持在线阅读。主要特点是&#xff1a;美观的界面、支持多用户、支持在线阅读、支持邮件推送、支持OPDS、支持一键安装&#xff0c;网页版初始化配置&#xff0c;轻松启动网站等等。 那么&#xff0c;如何利用docker快速搭…...

编程日记 2023/4/14 9:09:24

504. 七进制数——【Leetcode每日一题】

504. 七进制数 给定一个整数 num&#xff0c;将其转化为 7 进制&#xff0c;并以字符串形式输出。 示例 1: 输入: num 100 输出: “202” 示例 2: 输入: num -7 输出: “-10” 提示&#xff1a; −107<num<107-10^7 < num < 10^7−107<num<107 思路&…...

编程日记 2023/4/18 23:27:39

RocketMQ源码(24)—DefaultMQPushConsumer延迟消息源码

基于RocketMQ release-4.9.3&#xff0c;深入的介绍了DefaultMQPushConsumer延迟消息源码。 文章目录1 load加载延迟消息数据1.1 parseDelayLevel解析延迟等级2 start启动调度消息服务3 DeliverDelayedMessageTimerTask投递延迟消息任务3.1 executeOnTimeup执行延迟消息投递3.2…...

编程日记 2023/4/18 23:29:17

计算机视觉知识点（一）——交并比（IoU）及其若干改进

交并比&#xff08;IoU&#xff09;前言IoU公式及示意图IoU Loss缺点GIoU Loss公式及示意图缺点DIoU公式及示意图CIoU前言 目标检测是一个常见的计算机视觉任务&#xff0c;在目标检测任务中&#xff0c;交并比作为评判检测框的标准具有很重要的意义&#xff0c;在实际的应用中…...

编程日记 2023/4/16 6:40:32

一篇文章教你从零到一搭建自动化测试框架（附视频教程+源码）

目录 前言 1. 什么是自动化测试框架&#xff1f; 2. 没有万能的测试框架&#xff0c;适合自己项目的&#xff0c;能提高工作效率的就是好框架。 3. 设计框架的思路&#xff1a; 4.如何开展自动化测试 前言 关于测试框架的好处&#xff0c;比如快速回归提高测试效率&#x…...

编程日记 2023/4/18 23:29:54

【备战蓝桥杯】----01背包问题（动态规划）

&#x1f339;作者:云小逸 &#x1f4dd;个人主页:云小逸的主页 &#x1f4dd;Github:云小逸的Github &#x1f91f;motto:要敢于一个人默默的面对自己&#xff0c;强大自己才是核心。不要等到什么都没有了&#xff0c;才下定决心去做。种一颗树&#xff0c;最好的时间是十年前…...

编程日记 2023/5/12 17:45:35

Golang1.18新特性介绍——泛型

社区长期高呼的泛型特性在Golang 1.18中终于正式发布&#xff0c;Go泛型实现与传统的C有较大差异&#xff0c;更像Rust的泛型实现。本文详细介绍Golang泛型及其特性&#xff0c;包括泛型语法、类型参数、类型约束、类型近似以及constraints包提供内置类型等。 最近写Dao代码&am…...

编程日记 2023/4/18 23:31:31

【SpringBoot17】SpringBoot中使用Quartz管理定时任务

定时任务在系统中用到的地方很多&#xff0c;例如每晚凌晨的数据备份&#xff0c;每小时获取第三方平台的 Token 信息等等&#xff0c;之前我们都是在项目中规定这个定时任务什么时候启动&#xff0c;到时间了便会自己启动&#xff0c;那么我们想要停止这个定时任务的时候&…...

编程日记 2023/4/15 18:31:20

杨辉三角形 (蓝桥杯) JAVA

目录题目描述&#xff1a;暴力破解&#xff08;四成&#xff09;&#xff1a;二分法破解&#xff08;满分&#xff09;&#xff1a;题目描述&#xff1a; 下面的图形是著名的杨辉三角形&#xff1a; 如果我们按从上到下、从左到右的顺序把所有数排成一列&#xff0c;可以得到如…...

编程日记 2023/4/18 23:33:24

AI制药 - AlphaFold Multimer 的 MSA Pairing 源码

目前最新版本是v2.3.1&#xff0c;2023.1.12 AlphaFold multimer v1 于 2021 年 7 月发布&#xff0c;同时发表了一篇描述其方法和结果的论文。AlphaFold multimer v1 使用了与 AlphaFold 单体相同的模型结构和训练方法&#xff0c;但增加了一些特征和损失函数来处理多条链。Al…...

编程日记 2023/5/10 13:59:53

TitanIDE：云原生开发到底强在哪里？

原文作者&#xff1a;行云创新技术总监 邓冰寒 引言 是一种新的软件开发方法&#xff0c;旨在构建更可靠、高效、弹性、安全和可扩展的应用程序。与传统的应用程序开发方式不同&#xff0c;云原生是将开发环境完全搬到云端&#xff0c;构建一站式的云原生开发环境。云原生的开…...

编程日记 2023/4/14 9:10:21

单片机常用完整性校验算法

一、前言 单片机在开发过程中经常会遇到大文件传输&#xff0c;或者大量数据传输&#xff0c;在一些工业环境下&#xff0c;数据传输并不是很稳定&#xff0c;如何检验数据的完整性就是个问题&#xff0c;这里简单介绍一下单片机常用的几种数据完整性校验方法。 二、CheckSum校…...

编程日记 2023/4/12 14:43:36

Anaconda 的安装配置及依赖项的内外网配置

在分享anaconda 的安装配置及使用前&#xff0c;我们必须先明白anaconda是什么&#xff1b;Anaconda是一个开源的Python发行版本。两者区别在于前者是一门编程语言&#xff0c;后者相当于编程语言中的工具包。 由于python自身缺少numpy、matplotlib、scipy、scikit-learn等一系…...

编程日记 2023/4/15 18:34:15

p84 CTF夺旗-PHP弱类型异或取反序列化RCE

数据来源 文章参考 本课重点&#xff1a; 案例1&#xff1a;PHP-相关总结知识点-后期复现案例2&#xff1a;PHP-弱类型对比绕过测试-常考点案例3&#xff1a;PHP-正则preg_match绕过-常考点案例4&#xff1a;PHP-命令执行RCE变异绕过-常考点案例5&#xff1a;PHP-反序列化考题…...

编程日记 2023/4/15 18:35:40

2022财报逆转，有赞穿透迷雾实现突破

2022年&#xff0c;商家经营面临困难。但在一些第三方服务商的帮助下&#xff0c;也有商家取得了逆势增长。 2023年3月23日&#xff0c;有赞发布2022年业绩报告&#xff0c;它帮助许多商家稳住了一整年的经营。2022年&#xff0c;有赞门店SaaS业务的GMV达到425亿元&#xff0c…...

编程日记 2023/3/28 5:27:52

蓝桥杯 - 求组合数【C(a,b)】+ 卡特兰数

文章目录&#x1f4ac;前言885. 求组合数 I C(m,n) 【dp】886 求组合数 II 【数据大小10万级别】 【费马小定理快速幂逆元】887. 求组合数 III 【le18级别】 【卢卡斯定理 逆元 快速幂 】888.求组合数 IV 【没有%p -- 高精度算出准确结果】 【分解质因数 高精度乘法 --只用一…...

编程日记 2023/4/18 23:35:06

膳食真菌在癌症免疫治疗中的作用: 从肠道微生物群的角度

谷禾健康 癌症是一种恶性肿瘤&#xff0c;它可以发生在人体的任何部位&#xff0c;包括肺、乳房、结肠、胃、肝、宫颈等。根据世界卫生组织的数据&#xff0c;全球每年有超过1800万人被诊断出患有癌症&#xff0c;其中约有1000万人死于癌症。癌症已成为全球范围内的主要健康问题…...

编程日记 2023/4/13 18:31:03

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/12/26 6:10:17

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/12/24 13:47:40

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/12/14 4:42:07

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2025/12/17 14:33:52

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/12/25 10:19:03

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2025/12/24 20:39:02

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...

编程新知 2025/9/22 13:00:25

GraphQL 实战篇：Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

编程新知 2025/12/24 23:36:16