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

css4浮动+清除浮动

news 2026/2/2 17:33:28

浮动

  • 一.常见网页布局
    • 1.三种布局方式
    • 2.布局准则
  • 二.浮动（float）
    • 1.好处
    • 2.概念
    • 3.三大特性
    • 4.使用
    • 5.常见网页布局模板
    • 6.注意点
  • 三.清除浮动
    • 1.why
    • 2.本质
    • 3.语法
    • 4.四种way（后三个都是给父级添加）
    • 清除浮动总结

一.常见网页布局

1.三种布局方式

标准流/普通流/文档流
浮动
定位

2.布局准则

在这里插入图片描述
在这里插入图片描述

二.浮动（float）

1.好处

普通流盒子中间默认有空隙且不知道空隙大小，有些布局普通流做不到，浮动可以方便控制盒子间的空隙

2.概念

在这里插入图片描述

3.三大特性

（1）脱标
在这里插入图片描述
（2）一行内显示且顶端对齐
在这里插入图片描述
（3）具有行内块特征
在这里插入图片描述
在这里插入图片描述

4.使用

在这里插入图片描述

5.常见网页布局模板

在这里插入图片描述
在这里插入图片描述

6.注意点

在这里插入图片描述

三.清除浮动

1.why

在这里插入图片描述

2.本质

在这里插入图片描述

3.语法

在这里插入图片描述

应用
在这里插入图片描述

4.四种way（后三个都是给父级添加）

（1）额外标签法（空标签必须是块级元素）
在这里插入图片描述
在这里插入图片描述

（2）overflow

在这里插入图片描述

（3）：after伪元素发（复制调用）
在这里插入图片描述

（4）双伪元素（复制调用）
在这里插入图片描述

清除浮动总结

在这里插入图片描述

相关文章：

css4浮动+清除浮动

浮动 一.常见网页布局1.三种布局方式2.布局准则 二.浮动（float）1.好处2.概念3.三大特性4.使用5.常见网页布局模板6.注意点 三.清除浮动1.why2.本质3.语法4.四种way（后三个都是给父级添加）清除浮动总结 一.常见网页布局 1.三种布局…...

编程日记 2024/2/27 1:25:48

外包干了3个月，技术倒退明显...

先说情况，大专毕业，18年通过校招进入湖南某软件公司，干了接近6年的功能测试，今年年初，感觉自己不能够在这样下去了，长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…...

编程日记 2024/2/27 1:23:46

STM32控制数码管从0显示到99

首先 先画电路图吧！打开proteus，导入相关器件，绘制电路图。如下：（记得要保存啊！发现模拟一遍程序就自动退出了，有bug，我是解决不了，所以就是要及时保存，自己重…...

编程日记 2024/2/27 1:22:43

【机器学习算法】KNN鸢尾花种类预测案例和特征预处理。全md文档笔记（已分享，附代码）

本系列文章md笔记（已分享）主要讨论机器学习算法相关知识。机器学习算法文章笔记以算法、案例为驱动的学习，伴随浅显易懂的数学知识，让大家掌握机器学习常见算法原理，应用Scikit-learn实现机器学习算法的应用&#xff0…...

编程日记 2024/2/27 1:21:43

Windows 自带的 Linux 子系统(WSL)安装与使用

WSL官网安装教程： https://learn.microsoft.com/zh-cn/windows/wsl/install Windows 自带的Linux子系统，比用VM什么的香太多了。可以自己看官方教程，也可以以下步骤完成。 如果中间遇到我没遇到的问题百度，可以在评论区评论&#…...

编程日记 2024/2/27 1:20:42

C语言--贪吃蛇

目录 1. 实现目标2. 需掌握的技术3. Win32 API介绍控制台程序控制台屏幕上的坐标COORDGetStdHandleGetConsoleCursorinfoCONSOLE_CURSOR_INFOSetConsoleCursorInfoSetConsoleCursorPositionGetAsyncKeyState 4. 贪吃蛇游戏设计与分析地图<locale.h>本地化类项setlocale函…...

编程日记 2024/2/27 1:16:38

原型设计工具Axure RP

Axure RP是一款专业的快速原型设计工具。Axure&#xff08;发音&#xff1a;Ack-sure&#xff09;&#xff0c;代表美国Axure公司&#xff1b;RP则是Rapid Prototyping&#xff08;快速原型&#xff09;的缩写。 下载链接&#xff1a;https://www.axure.com/ 下载 可以免费试用…...

编程日记 2024/2/27 1:15:37

HeadFirst读书笔记

一、设计模式入门 1、使用模式最好的方式“把模式装进脑子里&#xff0c;然后在你的设计和已有的应用中&#xff0c;寻找何处可以使用它们”。以往是代码复用&#xff0c;现在是经验复用。 2、软件开发的一个不变的真理就是变化。 二、设计原则 1、找出应用中可能需要变化之…...

编程日记 2024/2/27 1:14:36

【C++】---内存管理new和delete详解

一、C/C内存分布 C/C内存被分为6个区域&#xff1a; &#xff08;1&#xff09; 内核空间&#xff1a;存放内核代码和环境变量。 &#xff08;2&#xff09;栈区&#xff1a;向下增长&#xff08;存放非静态局部变量&#xff0c;函数参数&#xff0c;返回值等等&#xff09; …...

编程日记 2024/2/27 1:12:33

go-zero微服务入门教程

go-zero微服务入门教程 本教程主要模拟实现用户注册和用户信息查询两个接口。 准备工作 安装基础环境 安装etcd&#xff0c; mysql&#xff0c;redis&#xff0c;建议采用docker安装。 MySQL安装好之后&#xff0c;新建数据库dsms_admin&#xff0c;并新建表sys_user&#…...

编程日记 2024/2/27 1:11:32

蓝桥杯刷题--python-12

3768. 字符串删减 - AcWing题库 nint(input()) sinput() res0 i0 while(i<n): if s[i]x: ji1 while(j<n and s[j]x): j1 resmax(j-i-2,0) ij else: i1 print(res) 3777. 砖块 - AcWing题库 # https://www.a…...

编程日记 2024/2/27 1:04:25

LeetCode LCR 085.括号生成

正整数 n 代表生成括号的对数&#xff0c;请设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[“((()))”,“(()())”,“(())()”,“()(())”,“()()()”] 示例 2&#xff1a; 输入&#x…...

编程日记 2024/2/27 1:02:23

抖音视频评论数据提取软件|抖音数据抓取工具

一、开发背景&#xff1a; 在业务需求中&#xff0c;我们经常需要下载抖音视频。然而&#xff0c;在网上找到的视频通常只能通过逐个复制链接的方式进行抓取和下载&#xff0c;这种操作非常耗时。我们希望能够通过关键词自动批量抓取并选择性地下载抖音视频。因此&#xff0c;为…...

编程日记 2024/2/27 0:59:21

【web】云导航项目部署及环境搭建(复杂)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、项目介绍1.1项目环境架构LNMP1.2项目代码说明 二、项目环境搭建2.1 Nginx安装2.2 php安装2.3 nginx配置和php配置2.3.1 修改nginx文件2.3.2 修改vim /etc/p…...

编程日记 2024/2/27 0:58:20

软件测试人员必会的linux命令

文件和目录操作： ● ls：列出目录中的文件和子目录。 ● cd：改变当前工作目录。 ● mkdir：创建新目录。 ● rm：删除文件或目录。 ● cp：复制文件或目录。 ● mv：移动或重命名文件或目录。 文本查看和编辑： ● cat：查看文件内容。 ● more或less：分页查看文件内…...

编程日记 2024/2/27 0:57:19

Mac使用K6工具压测WebSocket

commend空格 打开终端&#xff0c;安装k6 brew install k6验证是否安装成功 k6 version设置日志级别为debug export K6_LOG_LEVELdebug执行脚本&#xff08;进入脚本所在文件夹下&#xff09; k6 run --vus 100 --duration 10m --out csvresult.csv script.js 脚本解释&…...

编程日记 2024/2/27 0:52:13

小程序--vscode配置

要在vscode里开发微信小程序&#xff0c;需要安装以下两个插件&#xff1a; 安装后&#xff0c;即可使用vscode开发微信小程序。 注&#xff1a;若要实现鼠标悬浮提示&#xff0c;则需新建jsconfig.json文件&#xff0c;并进行配置&#xff0c;即可实现。 jsconfig.json内容如…...

编程日记 2024/2/27 0:51:11

linux僵尸进程

僵尸进程&#xff08;Zombie Process&#xff09;是指在一个进程终止时&#xff0c;其父进程尚未调用wait()或waitpid()函数来获取该进程的终止状态信息&#xff0c;导致进程的资源&#xff08;如进程表中的记录&#xff09;仍然保留在系统中的一种状态。 当一个进程结束时&am…...

编程日记 2024/2/27 0:46:03

【web | CTF】攻防世界 Web_php_unserialize

天命&#xff1a;这条反序列化题目也是比较特别&#xff0c;里面的漏洞知识点&#xff0c;在现在的php都被修复了 天命&#xff1a;而且这次反序列化的字符串数量跟其他题目不一样 <?php class Demo { // 初始化给变量内容&#xff0c;也就是当前文件&#xff0c;高亮显示…...

编程日记 2024/2/27 0:45:02

Vue3中的select 的option是多余的？

背景&#xff1a; 通过Vue3中填充一个下拉框&#xff0c;在打开页面时要指定默认选中&#xff0c;并在选项改变时把下拉框的选中值显示出来 问题&#xff1a; 填充通常的作法是设置 <option v-for"option in cities" :value"option.value" >&a…...

编程日记 2024/2/27 0:41:00

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/2 12:11:29

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/12/11 18:28:17

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2026/1/31 14:55:53

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2026/1/27 14:18:20

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2026/1/29 3:25:02

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2026/1/30 6:19:54

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2026/1/31 7:11:11