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

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

news 2025/10/28 20:40:13

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

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

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

文档流

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

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

网页布局的本质:

打破默认文档流的规则

浮动

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

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开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/10/27 0:14:08

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/10/17 17:55:51

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/8/26 18:00:13

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/10/25 12:07:11

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/10/27 13:42:13

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/10/24 15:27:29

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/10/19 15:23:13

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2025/10/27 18:29:26

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

编程新知 2025/10/2 19:46:59

springboot 日志类切面，接口成功记录日志，失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

编程新知 2025/10/24 8:42:46