CSS之块浮动
在盒子模型的基础上就可以对网页进行设计
不知道盒子模型的可以看前面关于盒子模型的内容
而普通的网页设计具有一定的原始规律,这个原始规律就是文档流
文档流
标签在网页二维平面内默认的一种排序方式,块级标签不管怎么设置都会占一行,而同一行不能放置两个块级标签
行级会默认占据本身大小的内容,下一个行级会紧贴在上一个内容的右边,直到没有位置后换行继续占用,这样的布局使得网页内容中的标签会默认紧贴在上一个标签的右边,如果右边摆不下了会自动换行继续从左至右摆放
这样一来每一个块标签都会另起一行,如果想在文档流中进行布局就会变动比较麻烦
网页布局的本质:
打破默认文档流的规则
浮动
所谓浮动指的就是使标签脱离原来的文档流,在父标签中浮动起来
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之块浮动
在盒子模型的基础上就可以对网页进行设计 不知道盒子模型的可以看前面关于盒子模型的内容 而普通的网页设计具有一定的原始规律,这个原始规律就是文档流 文档流 标签在网页二维平面内默认的一种排序方式,块级标签不管怎么设置都会占一行,而同一行不能放置两个块级标签 行级…...
探索GPT-4V在学术领域的应用——无需编程即可阅读和理解科学论文
1. 概述 论文地址：https://arxiv.org/pdf/2312.05468.pdf 随着人工智能潜力的不断扩大，人工智能（AI）在化学领域的应用也在迅速发展。特别是大规模语言模型的出现，极大地扩展了人工智能在化学研究中的作用。由于这些模…...
耐用充电宝有哪些？优质充电宝到底选哪个？良心推荐！
在电量即生产力的现今时代，如何为移动设备寻找一位最佳的伴侣呢？一款耐用、优质的充电宝无疑是你的不二之选。今天我们将带您揭开市场隐藏的一面，揭示哪些充电宝品牌真正代表了耐用与品质的标杆。让我们一起深入了解并选购最适合自己的充电宝…...
何为屎山代码？
在编程界，有一种代码被称为"屎山代码"。这并非指某种编程语言或方法，而是对那些庞大而复杂的项目的一种形象称呼。屎山代码，也被称为"祖传代码"，是历史遗留问题，是前人留给我们的"宝藏"…...
基于esp8266_点灯blinker_智能家居
文章目录 一 实现思路1 项目简介2 项目构成3 代码实现4 外壳部分 二 效果展示UI图片 一 实现思路 摘要：esp8266，mixly，点灯blinker，物联网，智能家居，3donecut 1 项目简介 1 项目效果 通过手机blinker app…...
Web前端开发交流群：深度探索、实践与创新的集结地
Web前端开发交流群：深度探索、实践与创新的集结地 在数字时代的浪潮中，Web前端开发扮演着举足轻重的角色。为了促进前端技术的交流与发展，Web前端开发交流群应运而生，成为众多开发者学习、分享、创新的集结地。本文将从四个方面、…...
苹果AI一夜颠覆所有，Siri史诗级进化，内挂GPT-4o
苹果AI一夜颠覆所有，Siri史诗级进化，内挂GPT-4o 刚刚，苹果AI，正式交卷！ 今天，苹果构建了一个全新AI帝国——个人化智能系统Apple Intelligence诞生，智能助手Siri迎来诞生13年以来的史诗级进化…...
量子计算的奥秘与魅力：开启未来科技的钥匙（详解）
目录 一、量子计算的基本概念 二、量子计算的基本原理 1.量子叠加态与相位态 一、概念 二、量子叠加态 定义与原理 特性与影响 应用领域 三、量子相位态 定义与原理 特性与影响 应用领域 2.量子门操作 一、概念 二、量子门操作的基本概念 三、常见的量子门操作…...
redis 主从同步时，是同步主节点的缓存积压区的数据，还是同步主节点的aof文件
Redis 的主从同步（replication）是同步主节点的数据到从节点上，但它既不是直接同步 AOF 文件，也不是同步缓存积压区。 当一个 Redis 从节点启动并连接到主节点时，会发生以下步骤： 同步数据集：从…...
Unity年中大促618活动又来了3折模板特效角色动画插件工具FPS生存建造模板RPG和2D素材优惠码UNITY6182024限时20240611
独立游戏开发需要找各种美术资源和模板，可以在低价时看看，节省开发时间。 Unity年中大促618活动又来了3折模板特效角色动画插件工具FPS生存建造模板RPG和2D素材优惠码UNITY6182024限时202406111104 300 款Unity引擎适配资源 3 折特惠，结账时输…...
【MyBatis-plus】saveBatch 性能调优和【MyBatis】的数据批量入库
总结最优的两种方法： 方法1： 使用了【MyBatis-plus】saveBatch 但是数据入库效率依旧很慢，那可能是是因为JDBC没有配置，saveBatch 批量写入并没有生效哦！！！ 详细配置如下：批量数据入…...
前端三剑客之JavaScript基础入门
目录 ▐ 快速认识JavaScript ▐ 基本语法 🔑JS脚本写在哪? 🔑注释 🔑变量如何声明? 🔑数据类型 🔑运算符 🔑流程控制 ▐ 函数 ▐ 事件 ▐ 计时 ▐ HTML_DOM对象 * 建议学习完HTML和CSS后再…...
Fyndiq买家号下单：自养号测评如何打造本土物理环境系统？
Fyndiq 是一个瑞典电子商务平台，我们通过该平台为渴望讨价还价的购物者提供一系列产品。该公司为希望以可访问的方式提高销售额的所有类型的零售商提供销售渠道。Fyndiq几乎是瑞典家喻户晓的存在，是瑞典折扣促销平台。以销售质优价廉的商品吸引了大量忠实…...
自动检测曲别针数量：图像处理技术的应用
引言 在这篇博客中，我们将探讨如何使用计算机视觉技术自动检测图像中曲别针的数量。 如图： [1]使用灰度转换 由于彩色信息对于曲别针计数并不重要，我们将图像转换为灰度图，这样可以减少处理数据的复杂度，加速后续的…...
【Git】多人协作 -- 详解
一、多人协作（1） ⽬前，我们所完成的工作如下： 基本完成 Git 的所有本地库的相关操作，git 基本操作，分支理解，版本回退，冲突解决等等。 申请码云账号，将远端信息 clone…...
Eureka和Nacos有哪些区别？
Eureka和Nacos都能起到注册中心的作用，用法基本类似。但还是有一些区别的，例如： Nacos支持配置管理，而Eureka则不支持。 而且服务注册发现上也有区别，我们来做一个实验： 我们停止user-service服务&#x…...
如何正确使用 include-what-you-use
简单地说，由 Google 开发的 include-what-you-use（IWYU）让源代码文件包含代码里用到的所有头文件。这种方法确保在改动了一些接口之后，代码依然最有可能编译成功。 之前我写了一篇关于 include-what-you-use 工具的文章ÿ…...
企业内网安全软件分享，有什么内网安全软件
内网安全？ 其实就是网络安全的一种。 什么是内网安全软件？ 内网安全软件是企业保障内网安全的一种重要工具。 它主要帮助企业实现对网络设备、应用程序、用户行为等方面的监控和管理，以预防和应对各种网络攻击。 这类软件主要用于对内网中…...
【摘葡萄game】
您想要了解的“摘葡萄游戏”可能是一个编程项目或者是一个编程相关的练习。我可以提供一个简单的摘葡萄游戏的思路和代码示例。这个游戏可以用多种编程语言来实现，比如Python、Java等。这里我以Python为例，给出一个基础版本的摘葡萄游戏的概念和代码。 …...
java如何实现字符串连接
在java中，字符串与字符串连接可以用运算符和 比如有字符串a,字符串b 想要把a和b连接起来，定义一个字符串变量c cab 或者 ab 示例代码 public class Zifuchuanlianjie {public static void main(String[] args) {String a"我叫李狗蛋";S…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
连锁超市冷库节能解决方案：如何实现超市降本增效
在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...
css的定位（position）详解：相对定位 绝对定位 固定定位
在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...
【深度学习新浪潮】什么是credit assignment problem？
Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...
高保真组件库：开关
一：制作关状态 拖入一个矩形作为关闭的底色：44 x 22，填充灰色CCCCCC，圆角23，边框宽度0，文本为”关“，右对齐，边距2,2,6,2，文本颜色白色FFFFFF。 拖拽一个椭圆，尺寸18 x 18，边框为0。3. 全选转为动态面板状态1命名为”关“。 二：制作开状态 复制关状态并命名为”开…...
MySQL基本操作（续）
第3章：MySQL基本操作（续） 3.3 表操作 表是关系型数据库中存储数据的基本结构，由行和列组成。在MySQL中，表操作包括创建表、查看表结构、修改表和删除表等。本节将详细介绍这些操作。 3.3.1 创建表 在MySQL中&#…...
代理服务器-LVS的3种模式与调度算法
作者介绍：简历上没有一个精通的运维工程师。请点击上方的蓝色《运维小路》关注我，下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 我们上一章介绍了Web服务器，其中以Nginx为主，本章我们来讲解几个代理软件：…...