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

CSS的浮动（下）

news 2025/11/9 9:13:45
🌟所属专栏：前端只因变凤凰之路
🐔作者简介：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

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/9/22 15:46:39

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2025/11/8 3:29:27

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/10/18 0:50:34

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/11/7 19:35:25

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/11/7 21:05:15

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/1 8:05:41

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/10/12 2:43:11

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/11/8 23:45:44

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

编程新知 2025/11/9 7:50:44

21-Oracle 23 ai-Automatic SQL Plan Management（SPM)

小伙伴们&#xff0c;有没有迁移数据库完毕后或是突然某一天在同一个实例上同样的SQL&#xff0c; 性能不一样了、业务反馈卡顿、业务超时等各种匪夷所思的现状。 于是SPM定位开始&#xff0c;OCM考试中SPM必考。 其他的AWR、ASH、SQLHC、SQLT、SQL profile等换作下一个话题…...

编程新知 2025/11/7 22:22:37