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

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

news 2025/7/5 23:19: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

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/6/30 11:49:08

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/7/1 6:09:18

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/6/15 17:37:51

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2025/7/1 5:47:07

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/6/15 19:02:54

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/7/2 15:02:24

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/6/18 3:04:54

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/7/5 0:22:43

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/7/4 13:23:30

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/6/27 23:59:27