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

CSS之块浮动

news 2025/10/30 9:56:55

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

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

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

文档流

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

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

网页布局的本质:

打破默认文档流的规则

浮动

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

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/11 14:45:02

探索GPT-4V在学术领域的应用——无需编程即可阅读和理解科学论文

1. 概述 论文地址&#xff1a;https://arxiv.org/pdf/2312.05468.pdf 随着人工智能潜力的不断扩大&#xff0c;人工智能&#xff08;AI&#xff09;在化学领域的应用也在迅速发展。特别是大规模语言模型的出现&#xff0c;极大地扩展了人工智能在化学研究中的作用。由于这些模…...

编程日记 2024/6/11 14:39:54

耐用充电宝有哪些？优质充电宝到底选哪个？良心推荐！

在电量即生产力的现今时代&#xff0c;如何为移动设备寻找一位最佳的伴侣呢&#xff1f;一款耐用、优质的充电宝无疑是你的不二之选。今天我们将带您揭开市场隐藏的一面&#xff0c;揭示哪些充电宝品牌真正代表了耐用与品质的标杆。让我们一起深入了解并选购最适合自己的充电宝…...

编程日记 2024/6/11 14:38:52

何为屎山代码？

在编程界&#xff0c;有一种代码被称为"屎山代码"。这并非指某种编程语言或方法&#xff0c;而是对那些庞大而复杂的项目的一种形象称呼。屎山代码&#xff0c;也被称为"祖传代码"&#xff0c;是历史遗留问题&#xff0c;是前人留给我们的"宝藏"…...

编程日记 2024/6/11 14:37:51

基于esp8266_点灯blinker_智能家居

文章目录 一 实现思路1 项目简介2 项目构成3 代码实现4 外壳部分 二 效果展示UI图片 一 实现思路 摘要&#xff1a;esp8266&#xff0c;mixly&#xff0c;点灯blinker&#xff0c;物联网&#xff0c;智能家居&#xff0c;3donecut 1 项目简介 1 项目效果 通过手机blinker app…...

编程日记 2024/6/11 14:36:50

Web前端开发交流群：深度探索、实践与创新的集结地

Web前端开发交流群&#xff1a;深度探索、实践与创新的集结地 在数字时代的浪潮中&#xff0c;Web前端开发扮演着举足轻重的角色。为了促进前端技术的交流与发展&#xff0c;Web前端开发交流群应运而生&#xff0c;成为众多开发者学习、分享、创新的集结地。本文将从四个方面、…...

编程日记 2024/6/11 14:35:49

苹果AI一夜颠覆所有，Siri史诗级进化，内挂GPT-4o

苹果AI一夜颠覆所有&#xff0c;Siri史诗级进化&#xff0c;内挂GPT-4o 刚刚&#xff0c;苹果AI&#xff0c;正式交卷&#xff01; 今天&#xff0c;苹果构建了一个全新AI帝国——个人化智能系统Apple Intelligence诞生&#xff0c;智能助手Siri迎来诞生13年以来的史诗级进化…...

编程日记 2024/6/11 14:34:47

量子计算的奥秘与魅力：开启未来科技的钥匙（详解）

目录 一、量子计算的基本概念 二、量子计算的基本原理 1.量子叠加态与相位态 一、概念 二、量子叠加态 定义与原理 特性与影响 应用领域 三、量子相位态 定义与原理 特性与影响 应用领域 2.量子门操作 一、概念 二、量子门操作的基本概念 三、常见的量子门操作…...

编程日记 2024/6/11 14:33:46

redis 主从同步时，是同步主节点的缓存积压区的数据，还是同步主节点的aof文件

Redis 的主从同步&#xff08;replication&#xff09;是同步主节点的数据到从节点上&#xff0c;但它既不是直接同步 AOF 文件&#xff0c;也不是同步缓存积压区。 当一个 Redis 从节点启动并连接到主节点时&#xff0c;会发生以下步骤&#xff1a; 同步数据集&#xff1a;从…...

编程日记 2024/6/11 14:31:43

Unity年中大促618活动又来了3折模板特效角色动画插件工具FPS生存建造模板RPG和2D素材优惠码UNITY6182024限时20240611

独立游戏开发需要找各种美术资源和模板&#xff0c;可以在低价时看看&#xff0c;节省开发时间。 Unity年中大促618活动又来了3折模板特效角色动画插件工具FPS生存建造模板RPG和2D素材优惠码UNITY6182024限时202406111104 300 款Unity引擎适配资源 3 折特惠&#xff0c;结账时输…...

编程日记 2024/6/11 14:30:42

【MyBatis-plus】saveBatch 性能调优和【MyBatis】的数据批量入库

总结最优的两种方法&#xff1a; 方法1&#xff1a; 使用了【MyBatis-plus】saveBatch 但是数据入库效率依旧很慢&#xff0c;那可能是是因为JDBC没有配置&#xff0c;saveBatch 批量写入并没有生效哦&#xff01;&#xff01;&#xff01; 详细配置如下&#xff1a;批量数据入…...

编程日记 2024/6/11 14:26:37

前端三剑客之JavaScript基础入门

目录 ▐ 快速认识JavaScript ▐ 基本语法 &#x1f511;JS脚本写在哪? &#x1f511;注释 &#x1f511;变量如何声明? &#x1f511;数据类型 &#x1f511;运算符 &#x1f511;流程控制 ▐ 函数 ▐ 事件 ▐ 计时 ▐ HTML_DOM对象 * 建议学习完HTML和CSS后再…...

编程日记 2024/6/11 14:25:35

Fyndiq买家号下单：自养号测评如何打造本土物理环境系统？

Fyndiq 是一个瑞典电子商务平台&#xff0c;我们通过该平台为渴望讨价还价的购物者提供一系列产品。该公司为希望以可访问的方式提高销售额的所有类型的零售商提供销售渠道。Fyndiq几乎是瑞典家喻户晓的存在&#xff0c;是瑞典折扣促销平台。以销售质优价廉的商品吸引了大量忠实…...

编程日记 2024/6/11 14:24:34

自动检测曲别针数量：图像处理技术的应用

引言 在这篇博客中&#xff0c;我们将探讨如何使用计算机视觉技术自动检测图像中曲别针的数量。 如图&#xff1a; [1]使用灰度转换 由于彩色信息对于曲别针计数并不重要&#xff0c;我们将图像转换为灰度图&#xff0c;这样可以减少处理数据的复杂度&#xff0c;加速后续的…...

编程日记 2024/6/11 14:20:27

【Git】多人协作 -- 详解

一、多人协作&#xff08;1&#xff09; ⽬前&#xff0c;我们所完成的工作如下&#xff1a; 基本完成 Git 的所有本地库的相关操作&#xff0c;git 基本操作&#xff0c;分支理解&#xff0c;版本回退&#xff0c;冲突解决等等。 申请码云账号&#xff0c;将远端信息 clone…...

编程日记 2024/6/11 14:19:26

Eureka和Nacos有哪些区别？

Eureka和Nacos都能起到注册中心的作用&#xff0c;用法基本类似。但还是有一些区别的&#xff0c;例如&#xff1a; Nacos支持配置管理&#xff0c;而Eureka则不支持。 而且服务注册发现上也有区别&#xff0c;我们来做一个实验&#xff1a; 我们停止user-service服务&#x…...

编程日记 2024/6/11 14:17:24

如何正确使用 include-what-you-use

简单地说&#xff0c;由 Google 开发的 include-what-you-use&#xff08;IWYU&#xff09;让源代码文件包含代码里用到的所有头文件。这种方法确保在改动了一些接口之后&#xff0c;代码依然最有可能编译成功。 之前我写了一篇关于 include-what-you-use 工具的文章&#xff…...

编程日记 2024/6/11 14:16:23

企业内网安全软件分享，有什么内网安全软件

内网安全&#xff1f; 其实就是网络安全的一种。 什么是内网安全软件&#xff1f; 内网安全软件是企业保障内网安全的一种重要工具。 它主要帮助企业实现对网络设备、应用程序、用户行为等方面的监控和管理&#xff0c;以预防和应对各种网络攻击。 这类软件主要用于对内网中…...

编程日记 2024/6/11 14:15:22

【摘葡萄game】

您想要了解的“摘葡萄游戏”可能是一个编程项目或者是一个编程相关的练习。我可以提供一个简单的摘葡萄游戏的思路和代码示例。这个游戏可以用多种编程语言来实现&#xff0c;比如Python、Java等。这里我以Python为例&#xff0c;给出一个基础版本的摘葡萄游戏的概念和代码。 …...

编程日记 2024/6/11 14:13:19

java如何实现字符串连接

在java中&#xff0c;字符串与字符串连接可以用运算符和 比如有字符串a,字符串b 想要把a和b连接起来&#xff0c;定义一个字符串变量c cab 或者 ab 示例代码 public class Zifuchuanlianjie {public static void main(String[] args) {String a"我叫李狗蛋";S…...

编程日记 2024/6/11 14:11:16

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/10/10 5:21:09

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/10/30 9:24:58

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/10/27 21:59:28

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/10/30 5:09:33

Rapidio门铃消息FIFO溢出机制

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

编程新知 2025/10/30 3:57:10

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/10/29 22:27:28

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/10/7 0:47:59

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

编程新知 2025/10/30 5:13:28