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

CSS的浮动（下）

news 文章来源：https://blog.csdn.net/weixin_62588253/article/details/129736335 2025/2/7 9:41:28
🌟所属专栏：前端只因变凤凰之路
🐔作者简介：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

怎么将模糊的照片变清晰

怎么将模糊的照片变清晰?珍贵的照片每个人都会有&#xff0c;而遇到珍贵的照片变模糊了&#xff0c;相信会让人很苦恼的。那么有没有办法可以解决呢?答案是有的&#xff0c;我们可以用工具让模糊的照片变得清晰。下面就来分享一些让模糊的照片变清晰的方法&#xff0c;有兴趣…...

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

【软件测试】基础知识第一篇

文章目录一. 什么是软件测试二. 测试和调试的区别三. 什么是测试用例四. 软件的生命周期五. 软件测试的生命周期一. 什么是软件测试 软件测试就是验证软件产品特性是否满足用户的需求。 那需求又是什么呢&#xff1f;在多数软件公司&#xff0c;会有两种需求&#xff0c;一种…...

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

【百面成神】java web基础7问，你能坚持到第几问

前 言 &#x1f349; 作者简介&#xff1a;半旧518&#xff0c;长跑型选手&#xff0c;立志坚持写10年博客&#xff0c;专注于java后端 ☕专栏简介&#xff1a;纯手打总结面试题&#xff0c;自用备用 &#x1f330; 文章简介&#xff1a;java web最基础、重要的8道面试题 文章目…...

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

Centos7安装、各种环境配置和常见bug解决方案，保姆级教程（更新中）

文章目录前言一、Centos7安装二、各种环境配置与安装2.1 安装net-tools&#xff08;建议&#xff09;2.2 配置静态网络&#xff08;建议&#xff09;2.1 修改Centos7的时间&#xff08;建议&#xff09;2.2 Centos7系统编码问题2.3 vim安装&#xff08;建议&#xff09;2.4 解决…...

编程日记 2023/4/14 9:12:40

【C++进阶】智能指针

文章目录为什么需要智能指针&#xff1f;内存泄漏什么是内存泄漏&#xff0c;内存泄漏的危害内存泄漏分类&#xff08;了解&#xff09;如何避免内存泄漏智能指针的使用及原理smart_ptrauto_ptrunique_ptrshared_ptr线程安全的解决循环引用weak_ptr删除器为什么需要智能指针&am…...

编程日记 2023/4/18 23:41:14

软件测试面试题 —— 整理与解析（3）

&#x1f60f;作者简介&#xff1a;博主是一位测试管理者&#xff0c;同时也是一名对外企业兼职讲师。 &#x1f4e1;主页地址&#xff1a;&#x1f30e;【Austin_zhai】&#x1f30f; &#x1f646;目的与景愿&#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能&#xf…...

编程日记 2023/4/18 23:43:53

springboot常用的20个注解

Spring Boot方式的项目开发已经逐步成为Java应用开发领域的主流框架&#xff0c;它不仅可以方便地创建生产级的Spring应用程序&#xff0c;还能轻松地通过一些注解配置与目前比较火热的微服务框架SpringCloud集成&#xff0c; 而Spring Boot 之所以能够轻松地实现应的创建及与…...

编程日记 2023/3/28 4:42:28

USB组合设备——带鼠标功能的键盘

文章目录带鼠标功能的键盘一个接口实现报告描述符示例多个接口实现复合设备和组合设备配置描述符集合的实现报告的返回附 STM32 枚举日志复合设备&#xff1a;Compound Device 内嵌 Hub 和多个 Function&#xff0c;每个 Function 都相当于一个独立的 USB 外设&#xff0c;有自…...

编程日记 2023/4/13 3:19:22

数据结构与算法基础-学习-18-哈夫曼编码

一、个人理解在远程通讯中&#xff0c;需要把字符转成二进制的字符串进行传输&#xff0c;例如我们需要传输ABCD&#xff0c;我们可以用定长的字符串进行表示&#xff0c;例如:A:00B:01C:02D:03这样可能就造成空间的浪费&#xff0c;我们多存储了一个0号位。那用变长呢&#xf…...

编程日记 2023/3/28 4:32:23

ZMC408CE | 实现“8通道独立PSO”应用场景

一、ZMC408SCAN产品亮点 1.高性能处理器&#xff0c;提升运算速度、响应时间和扫描周期等&#xff1b; 2.一维/二维/三维、多通道视觉飞拍&#xff0c;高速高精&#xff1b; 3.位置同步输出PSO&#xff0c;连续轨迹加工中对精密点胶胶量控制和激光能量控制等&#xff1b; 4…...

编程日记 2023/4/13 18:32:11

静态网页设计公司报价/保定百度首页优化

前言 开篇名义&#xff0c;这篇博客介绍一下Android下使用绑定服务进行时数据交互的几种方法。关于Android下Service的内容&#xff0c;前面两篇博客已经介绍了&#xff0c;不清楚的可以移步过去先看看&#xff1a;Android--Service之基础、Android--Service之提高。 在前面的博…...

编程日记 2025/2/7 8:44:59

网站建设专业培训/合肥seo网站管理

Ubuntu的运行模式 Ubuntu从大的方面来说&#xff0c;分为图形化界面和命令行模式&#xff0c;图形化界面是系统默认的模式&#xff0c;但是容易崩溃&#xff0c;在进入不了图形化界面的时候&#xff0c;就需要进入命令行模式来进行操作&#xff0c;接下来介绍一下怎么进入命令…...

编程日记 2025/2/7 7:51:27

建设银行电子银行网站/关键字排名查询工具

一、使用响应式表单的步骤1、在模块(一般是app.module.ts)中引入ReactiveFormsModule2、在组件的ts文件中使用响应式表单import { Component, OnInit } from angular/core;import { FormGroup, FormBuilder, Validators, FormControl } from angular/forms;Component({selector…...

编程日记 2025/2/7 6:14:42

axure rp9网站界面设计/网站外链查询

基本语法和实例&#xff1a;1、EXP:有三种主要的方式(完全、用户、表)1、完全&#xff1a;EXP SYSTEM/MANAGER BUFFER64000 FILEC:\FULL.DMP FULLY如果要执行完全导出&#xff0c;必须具有特殊的权限2、用户模式&#xff1a;EXP SONIC/SONIC BUFFER64000 FILEC:\SONIC.DMP O…...

编程日记 2025/2/7 5:57:33

网站运营维护合同/数据分析网站

Web服务器收到客户端的http请求&#xff0c;会针对每一次请求&#xff0c;分别创建一个用于代表请求的request对象、和代表响应的response对象。request和response对象即然代表请求和响应&#xff0c;那我们要获取客户机提交过来的数据&#xff0c;只需要找request对象就行了。…...

编程日记 2025/2/7 4:16:37

1000学习做网站贵吗/观看b站的广告网站平台

2019独角兽企业重金招聘Python工程师标准>>> binSort.cpp /** 这里是主函数的执行文件 * binSort.cpp */ #include<iostream> #include"studentrecord1.h" #include"chainwithiterator.h" #include"myexceptions.h"void…...

编程日记 2025/2/7 4:06:31