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

CSS之块浮动

news 文章来源：https://blog.csdn.net/2301_80931793/article/details/139596964 2024/11/6 17:23:43

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

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

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

文档流

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

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

网页布局的本质:

打破默认文档流的规则

浮动

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

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

流量卡选卡攻略，拯救不会选流量卡的小白！

​ 家人们&#xff0c;你们知道不&#xff0c;选择一款性价比高的流量卡&#xff0c;真的超级省钱。 一、首先&#xff0c;说一说申请。 运营商推出线上流量卡&#xff0c;注意是线上的流量卡&#xff0c;都是免费领取&#xff0c;运营商包邮到家&#xff0c;在激活充值之前不…...

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

python class __format__ __bytes__区别

在Python中&#xff0c;__format__和__bytes__是两个特殊方法&#xff0c;它们允许对象自定义它们在特定情境下的字符串表示。以下是这两个方法的区别和作用&#xff1a; __format__ 作用&#xff1a;__format__方法用于定义对象在使用format()函数或格式化字符串&#xff08…...

编程日记 2024/6/11 14:08:12

C++ | Leetcode C++题解之第134题加油站

题目&#xff1a; 题解&#xff1a; class Solution { public:int canCompleteCircuit(vector<int>& gas, vector<int>& cost) {int n gas.size();int i 0;while (i < n) {int sumOfGas 0, sumOfCost 0;int cnt 0;while (cnt < n) {int j (i …...

编程日记 2024/6/11 14:06:10

【Linux】ls命令

这个命令主要是用于显示指定工作目录下之内容&#xff08;列出目前工作目录所含的文件及子目录)。 掌握几个重点的常使用的就可以&#xff1a; ls -l # 以长格式显示当前目录中的文件和目录 ls -a # 显示当前目录中的所有文件和目录&am…...

编程日记 2024/6/11 14:05:09

多态、虚函数表与动态绑定的深入解析

目录 多态简介 虚函数表与动态绑定 虚函数表 动态绑定机制 内存与性能影响 纯虚函数与抽象类 纯虚函数 抽象类 动态类型转换与typeid操作符 dynamic_cast typeid操作符 虚析构函数的重要性 在面向对象编程中&#xff0c;多态性是一种核心特性&#xff0c;它允许我们…...

编程日记 2024/6/11 14:03:07

VitePress+Docker+jenkins构建个人网站

VitePress官网 VitePress | 由 Vite 和 Vue 驱动的静态站点生成器 可以理解为一个前端脚手架:快速生成个人站点 最好先大概看一遍 快速开始 | VitePress 可以在线体验一下 安装条件 node -v 检查下node版本 在D盘创建一个文件夹 例如:VitePress 进入文件夹 cmd npm ini…...

编程日记 2024/6/11 14:02:05

Windows11下Docker使用记录（五）

目录 准备1. WSL安装cuda container toolkit2. win11 Docker Desktop 设置3. WSL创建docker container并连接cuda4. container安装miniconda&#xff08;可选&#xff09; Docker容器可以从底层虚拟化&#xff0c;使我们能够在 不降级 CUDA驱动程序的情况下使用 任何版本的CU…...

编程日记 2024/6/11 14:00:02

快速学习Java的多维数组技巧

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…...

编程日记 2024/6/11 13:59:01

C语言运算类型有哪些

C语言中的运算类型主要分为以下几类&#xff1a; 1. 算术运算符&#xff1a; - 加法运算符 - 减法运算符 - - 乘法运算符 * - 除法运算符 / - 取模运算符 %&#xff08;取余数&#xff09; 2. 关系运算符&#xff1a; - 大于 > - 小于 < - 大…...

编程日记 2024/6/11 13:56:57

【深度学习】Loss为Nan的可能原因

文章目录 1. 问题情境2. 原因分析3. 导致Loss为Nan的其他可能原因 1. 问题情境 在某个网络架构下&#xff0c;我为某个数据项引入了一个损失函数。 这个数据项是nn.Embedding类型的&#xff0c;我加入的损失函数是对nn.Embedding空间做约束。 因为我在没加入优化loss前&#x…...

编程日记 2024/6/11 13:55:56

单位做网站备案用身份证有啥用/百度云登录入口官网

创建一个新的项目IPHONE 的。 项目名&#xff1a;prog3 点击到 main.storyboard 中&#xff0c;再点击 view ,就可以看到手机界面了。 从对象库 object library 中拖控件到界面中即可。 上图指的就是对象库。...

编程日记 2024/11/6 16:13:34

网站大图轮播/南宁网站推广排名

题目 本题要求你写个程序把给定的符号打印成沙漏的形状。例如给定17个“*”&#xff0c;要求按下列格式打印 ************ *****所谓“沙漏形状”&#xff0c;是指每行输出奇数个符号&#xff1b;各行符号中心对齐&#xff1b;相邻两行符号数差2&#xff1b;符号数先从大到小…...

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

网站百度权重怎么提升/seo优化技术培训中心

上篇文章中我们提到了代价函数J(θ)J(\theta)J(θ)&#xff0c;并期望使它最小化&#xff0c;那代价函数长什么样子呢&#xff1f; 接下来&#xff0c;我们将给大家一个直观的感受&#xff0c;看看参数θ\thetaθ取不同值时&#xff0c;J(θ)J(\theta)J(θ)的几何呈现 我们可以…...

编程日记 2024/11/6 12:25:54

企业网站设计费用/百度关键词优化策略

2019独角兽企业重金招聘Python工程师标准>>> jsp页面上实现表格的竖向合并。 01 /** 02 * 合并表格的列 03 * param {String} tableId要合并的表格的id 04 * param {int} fCol开始的列 05 * param {int} eCol结束的列 06 * return void 07 */ 08 func…...

编程日记 2024/11/6 8:44:35

wordpress myqaptcha/淘宝关键词工具

畅通工程续Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description 某省自从实行了很多年的畅通工程计划后&#xff0c;终于修建了很多路。不过路多了也不好&#xff0c;每次要从一个城镇到另一个城镇时&#xff0c;都有许多种道路方案…...

编程日记 2024/11/6 5:48:09

外部网站可以做链接到淘宝吗/磁力狗bt

想要寻找一款各功能强大&#xff0c;使用简便的看图工具&#xff1f;一定不要错过这篇文章&#xff0c;小编精选了5款综合性非常高的软件分给大家&#xff0c;颜值和功能性都经得住吊打的那种&#xff0c;话不多说来看文字介绍吧~ macOS上简便好用的看图软件分享 XnViewMP fo…...

编程日记 2024/11/6 4:32:51