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

前端学习CSS之神奇的块浮动

news 2026/1/30 6:20:10

在盒子模型的基础上就可以对网页进行设计

不知道盒子模型的可以看前面关于盒子模型的内容

而普通的网页设计具有一定的原始规律,这个原始规律就是文档流

文档流

标签在网页二维平面内默认的一种排序方式,块级标签不管怎么设置都会占一行,而同一行不能放置两个块级标签
行级会默认占据本身大小的内容,下一个行级会紧贴在上一个内容的右边,直到没有位置后换行继续占用,这样的布局使得网页内容中的标签会默认紧贴在上一个标签的右边,如果右边摆不下了会自动换行继续从左至右摆放

这样一来每一个块标签都会另起一行,如果想在文档流中进行布局就会变动比较麻烦

网页布局的本质:

打破默认文档流的规则

浮动

所谓浮动指的就是使标签脱离原来的文档流,在父标签中浮动起来

float属性

none ：不浮动
left ：向左浮动
right ：向右浮动

<!--这是一个默认的四个块级标签的网页-->
<body><div class="n1">新闻首页</div><div class="n1">体育新闻</div><div class="n1">科技前言</div><div class="n1">娱乐快报</div></body>

默认的样式是四个块级标签各占一行,非常浪费空间

在这里插入图片描述

可以使用float属性对其设置浮动,让其脱离原本的文档流

当一个块级标签浮动后其宽度默认变为内容的宽度


浮动存在的问题

浮动后四个块级标签都紧贴在一起了,而且原本的二维平面就没有内容了,如果在原来的基础上再添加一个块级标签的话会直接在四个浮动的块级标签后方,而不是新起一行

当一个标签浮动后,其下方的标签会上移

在这里插入图片描述

浮动会使标签完全脱离文档流,也就是不再在文档中占用位置,标签浮动以后完全脱离文档流,这时不会在影响父标签的高度,也就是浮动标签不会撑开父标签

clear属性

clear属性可以用于清楚标签周围的浮动对标签的影响,其他标签的位置不发生变化

left ： 忽略左侧浮动
right ：忽略右侧浮动
both ：忽略全部浮动

可以通过在浮动后的标签后写一个空标签

<!--清除浮动-->
<div style = "clear:left;"></div>

这样就清除了浮动的影响

在这里插入图片描述

相关文章：

前端学习CSS之神奇的块浮动

在盒子模型的基础上就可以对网页进行设计 不知道盒子模型的可以看前面关于盒子模型的内容 而普通的网页设计具有一定的原始规律,这个原始规律就是文档流 文档流 标签在网页二维平面内默认的一种排序方式,块级标签不管怎么设置都会占一行,而同一行不能放置两个块级标签 行级…...

编程日记 2024/6/16 10:08:56

【Java】内部类、枚举、泛型

目录 1.内部类1.1概述1.2分类1.3匿名内部类(重点) 2.枚举2.1一般枚举2.2抽象枚举2.3应用1&#xff1a;用枚举写单例2.4应用2&#xff1a;标识常量 3.泛型3.1泛型认识3.2泛型原理3.3泛型的定义泛型类泛型接口泛型方法 3.4泛型的注意事项 1.内部类 1.1概述 内部类&#xff1a;指…...

编程日记 2024/6/16 10:07:55

LabVIEW电子类实验虚拟仿真系统

开发了基于LabVIEW开发的电子类实验虚拟仿真实验系统。该系统通过图形化编程方式&#xff0c;实现了复杂电子实验操作的虚拟化&#xff0c;不仅提高了学生的操作熟练度和学习兴趣&#xff0c;而且通过智能评价模块提供即时反馈&#xff0c;促进教学和学习的互动。 项目背景 在…...

编程日记 2024/6/16 10:06:52

SVM支持向量机

SVM的由来和概念 间隔最大化是找最近的那个点的距离’ 之前我们学习的都是线性超平面,现在我们要将超平面变成圈 对于非线性问题升维来解决 对于下图很难处理,我们可以将棍子立起来,然后说不定red跑到左边了,green跑到右边了(可能增加了某种筛选条件导致两个豆子分离)(只是一种…...

编程日记 2024/6/16 10:05:51

【Unity】RPG2D龙城纷争（二）关卡、地块

更新日期&#xff1a;2024年6月12日。 项目源码&#xff1a;后续章节发布 索引 简介地块&#xff08;Block&#xff09;一、定义地块类二、地块类型三、地块渲染四、地块索引 关卡&#xff08;Level&#xff09;一、定义关卡类二、关卡基础属性三、地块集合四、关卡初始化五、关…...

编程日记 2024/6/16 10:04:50

mediamtx流媒体服务器测试

MediaMTX简介 在web页面中直接播放rtsp视频流&#xff0c;重点推荐&#xff1a;mediamtx&#xff0c;不仅仅是rtsp-CSDN博客 mediamtx github MediaMTX(以前的rtsp-simple-server)是一个现成的和零依赖的实时媒体服务器和媒体代理&#xff0c;允许发布&#xff0c;读取&…...

编程日记 2024/6/16 10:02:48

C# 循环

C# 循环 在编程中&#xff0c;循环是一种控制结构&#xff0c;它允许我们重复执行一段代码多次。C# 提供了几种循环机制&#xff0c;以适应不同的编程需求。本文将详细介绍 C# 中常用的几种循环类型&#xff0c;包括 for 循环、while 循环、do-while 循环和 foreach 循环&…...

编程日记 2024/6/16 10:00:45

PHP杂货铺家庭在线记账理财管理系统源码

家庭在线记帐理财系统&#xff0c;让你对自己的开支了如指掌&#xff0c;图形化界面操作更简单&#xff0c;非常适合家庭理财、记账&#xff0c;系统界面简洁优美&#xff0c;操作直观简单&#xff0c;非常容易上手。 安装说明&#xff1a; 1、上传到网站根目录 2、用phpMyad…...

编程日记 2024/6/16 9:57:42

机器学习中的神经网络重难点！纯干货（上篇）

. . . . . . . . .纯干货 . . . . . . 目录 前馈神经网络 基本原理 公式解释 一个示例 卷积神经网络 基本原理 公式解释 一个示例 循环神经网络 基本原理 公式解释 一个案例 长短时记忆网络 基本原理 公式解释 一个示例 自注意力模型 基本原理…...

编程日记 2024/6/16 9:55:39

[DDR4] DDR1 ~ DDR4 发展史导论

依公知及经验整理&#xff0c;原创保护&#xff0c;禁止转载。 专栏 《深入理解DDR4》 内存和硬盘是电脑的左膀右臂&#xff0c; 挑起存储的大梁。因为内存的存取速度超凡地快&#xff0c; 但内存上的数据掉电又会丢失&#xff0c;一直其中缓存的作用&#xff0c;就像是我们的工…...

编程日记 2024/6/16 9:54:37

享元和代理模式

文章目录 享元模式1.引出享元模式1.展示网站项目需求2.传统方案解决3.问题分析 2.享元模式1.基本介绍2.原理类图3.外部状态和内部状态4.类图5.代码实现1.AbsWebSite.java 抽象的网站2.ConcreteWebSite.java 具体的网站&#xff0c;type属性是内部状态3.WebSiteFactory.java 网站…...

编程日记 2024/6/16 9:53:36

[英语单词] ellipsize，动词化后缀 -ize

openvswitch manual里的一句话&#xff1a;里面有使用ellipsize&#xff0c;但是查字典是没有这个单词&#xff0c;这就是创造出来的动词。将单词ellipsis&#xff0c;加动词化后缀&#xff0c;-ize。 Often we ellipsize arguments not important to the discussion, e.g.: &…...

编程日记 2024/6/16 9:49:31

自然资源-测绘地信专业术语，值得收藏！

自然资源-测绘地信专业术语&#xff0c;值得收藏&#xff01; 1、1954年北京坐标系 1954年我国决定采用的国家大地坐标系&#xff0c;实质上是由原苏联普尔科沃为原点的1942年坐标系的延伸。 2、1956年黄海高程系统 根据青岛验潮站1950年一1956年的验潮资料计算确定的平均海面…...

编程日记 2024/6/16 9:48:30

如何在小程序中实现页面之间的返回

在小程序中实现页面之间的返回&#xff0c;通常有以下几种方法&#xff0c;这些方法各有特点&#xff0c;适用于不同的场景&#xff1a; 1. 使用wx.navigateBack方法 描述&#xff1a;wx.navigateBack是微信小程序中用于关闭当前页面&#xff0c;返回上一页面或多级页面的API…...

编程日记 2024/6/16 9:47:29

深入解析数据结构之B树：平衡树中的王者

在计算机科学中&#xff0c;数据结构是算法和程序设计的基础。而在众多数据结构中&#xff0c;B树作为一种平衡树&#xff0c;在数据库和文件系统中有着广泛应用。本文将详细介绍B树的概念、特点、操作、优缺点及其应用场景&#xff0c;帮助读者深入理解这一重要的数据结构。 …...

编程日记 2024/6/16 9:46:27

18. 第十八章 继承

18. 继承 和面向对象编程最常相关的语言特性就是继承(inheritance). 继承值得是根据一个现有的类型, 定义一个修改版本的新类的能力. 本章中我会使用几个类来表达扑克牌, 牌组以及扑克牌性, 用于展示继承特性.如果你不玩扑克, 可以在http://wikipedia.org/wiki/Poker里阅读相关…...

编程日记 2024/6/16 9:44:25

OperationalError: (_mysql_exceptions.OperationalError)

OperationalError: (_mysql_exceptions.OperationalError) (2006, MySQL server has gone away) 这个错误通常表示客户端（例如你的 Python 程序使用 SQLAlchemy 连接到 MySQL 数据库）和 MySQL 服务器之间的连接被异常关闭了。这个问题可能由多种原因引起，以下是一些常见的原…...

编程日记 2024/6/16 9:43:24

DocGraph相关概念

结合简化版的直观性和专业版的深度&#xff0c;我们可以得到一个既易于理解又包含专业细节的DocGraph概念讲解。 DocGraph概述&#xff08;简化版&#xff09; 想象DocGraph就像是文章信息的地图。它通过拆分文档、识别关键词、分析关系&#xff0c;并最终以图形方式呈现这些…...

编程日记 2024/6/16 9:41:21

MySQL限制登陆失败次数配置

目录 一、限制登陆策略 1、Windows 2、Linux 一、限制登陆策略 1、Windows 1&#xff09;安装插件 登录MySQL数据库 mysql -u root -p 执行命令安装插件 #限制登陆失败次数插件 install plugin CONNECTION_CONTROL soname connection_control.dll;install plugin CO…...

编程日记 2024/6/16 9:38:18

洛谷题解 - P1192 台阶问题

目录 题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示代码 题目描述 有 N N N 级台阶&#xff0c;你一开始在底部&#xff0c;每次可以向上迈 1 ∼ K 1\sim K 1∼K 级台阶&#xff0c;问到达第 N N N 级台阶有多少种不同方式。 输入格式 两个正整数 N , K …...

编程日记 2024/6/16 9:37:17

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/1/22 8:28:23

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2026/1/24 11:37:23

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2026/1/26 21:56:38

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2026/1/28 9:04:29

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/27 1:41:23

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2026/1/23 10:37:42