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

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

news 2025/9/13 7:46:56

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

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

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

文档流

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

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

网页布局的本质:

打破默认文档流的规则

浮动

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

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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/9/12 17:48:55

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/9/11 16:48:27

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/9/1 12:53:45

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/9/2 16:59:56

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/9/6 1:10:18

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/8/22 5:05:23

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/8/21 20:18:45

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/9/3 15:58:14