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

CSS之块浮动

news 2026/2/3 2:03:20

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

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

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

文档流

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

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

网页布局的本质:

打破默认文档流的规则

浮动

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

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/2 12:11:29

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/2/1 9:15:13

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/12/14 20:57:41

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/1/26 19:42:22

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2026/2/1 19:08:45

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2026/1/30 0:09:51

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2026/1/28 11:31:28

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19