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

CSS学习10[重点]--浮动、浮动的效果以及内幕特性

news 2026/2/9 18:48:34

CSS布局——浮动

  • 前言
  • 一、普通流
  • 二、浮动
  • 三、什么是浮动?
  • 四、浮动的内幕特性
  • 总结

前言

CSS盒子布具的三种机制：普通流（标准流）、定位、浮动。

一、普通流

普通流：网页内元素自上而下，从左到右排序。

二、浮动

  1. 浮动最开始的时候浮动是做文字环绕效果

    <html>
<head><style>div {width: 200px;height: 100px;margin: 0 auto;}img {float: right;}</style>
</head>
<body><div>123899hj9d<img src="#.png" width="12" height="10" alt=""></div>
</body>
</html>

  2. 后来发现可以用浮动布局盒子

三、什么是浮动?

  1. 普通流改到浮动

    <html>
<head><style>div {width: 200px;height: 100px;background-color: pink;display: inline-block; /*转换为行内块元素，放到一行但是元素中间有空格*/float: left; /*左侧浮动 一行排列没有空隙*/}div:nth-child(2) {background-color: hotpink;}div:last-child {background-color: deeppink;}</style>
</head>
<body><div></div><div></div>
</body>
</html>

  2. 实现块级元素放在一行。用display转换为行内块元素，但是此时div之间的空格难以去掉。用float: left; 可以放在一行且没有空格。

  3. 元素的浮动指定了浮动属性的元素脱离标准流，移动到父元素中指定位置的过程。在CSS中用float属性来定义浮动，其基本语法格式：

    float: left;
    float: right;
    float: none;

  4. 具体来说，浮动体现在脱离标准流，压在标准流上面。

    <html>
<head><style>div:first-child {width: 200px;height: 100px;background-color: pink;float: left; /*加入这行，第一个盒子浮动到最上面，第二个盒子在底层从左上开始*/}div:last-child {width: 200px;height: 700px;background-color: blue;}/*如果两个盒子不加浮动，都是标准流，块级元素自上而下显示*/</style>
</head>
<body><div></div><div></div>
</body>
</html>

四、浮动的内幕特性

  1. 浮动脱离标准流，不占位置，压在标准流上面。浮动只有左右浮动。

  2. 使用的时候需要首先创造包含块的概念，即浮动的元素找它最近的父级元素对齐，但不超出内边距。

    <html>
<head><style>.father {width: 200px;height: 100px;background-color: pink;border: 10px solid purple;padding: 10px;}.son {width: 100px;height: 50px;background-color: blue;float: left; }</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

  3. 浮动元素的排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

    <html>
<head><style>section {width: 500px;height: 500px;background-color: pink;padding: 10px;}section div:first-child {width: 100px;height: 50px;background-color: blue;float: left; }section div:last-child {width: 100px;height: 50px;background-color: purple;float: left; }</style>
</head>
<body>
<section><div>1</div><div>2</div>
</section>
</body>
</html>
    • 一个父盒子里面的子盒子，如果有一个子级有浮动，则其他子级都需要浮动。这样才能一行对齐显示。
    • 元素添加浮动之后，具有行内块特性。元素的大小取决于定义的大小或者默认的内容大小。
      <html>
<head><style>div {width: 500px;height: 500px;background-color: pink;float: left;  /*块级元素浮动之后 具有行内块特性*/}span {height: 100px;background-color: hotpink;float: left;  /*行内元素浮动之后 具有行内块特性*/}/*行内块特性 可以一行放多个 具有宽度和高度 盒子的大小由内容决定*/</style>
</head>
<body>
<section><div>1</div><div>2</div><span>123</span><span>123</span>
</section>
</body>
</html>

总结

浮动的目的为了让多个块级元素同一行显示。
float 浮漏特
浮：加了浮动的元素盒子是浮起来的，漂浮在标准流盒子上面
漏：加了浮动的盒子不占位置，原来的位置漏给了标准流盒子
特：特别注意，浮动的盒子需要和标准流的父类搭配使用，浮动可以使元素显示模型表现为行内块特性

相关文章：

CSS学习10[重点]--浮动、浮动的效果以及内幕特性

CSS布局——浮动 前言一、普通流二、浮动三、什么是浮动?四、浮动的内幕特性总结 前言 CSS盒子布具的三种机制&#xff1a;普通流&#xff08;标准流&#xff09;、定位、浮动。 一、普通流 普通流&#xff1a;网页内元素自上而下&#xff0c;从左到右排序。 二、浮动 浮动…...

编程日记 2024/9/9 7:03:17

matlab基本语法

基本语法 变量命名规则 区分大小写长度不超过63位字母开头&#xff0c;可以有字母、下划线和数字组成&#xff0c;但不能使用标点应该简洁明了 命令行窗口 >>>clc 清楚命令窗口 >>> claer all 清理工作区内容 注释 %% 注释符 数据类型 1.数字 11 2…...

编程日记 2024/9/9 7:02:16

【Leetcode152】乘积最大子数组（动态规划）

文章目录 一、题目二、思路三、代码 一、题目 二、思路 &#xff08;0&#xff09;读懂题意&#xff1a;题目的“连续”是指位置的连续&#xff0c;而不是说数字的连续&#xff0c;这是个大坑。 &#xff08;1&#xff09;确定状态&#xff1a;定义两个状态来记录当前子数组的…...

编程日记 2024/9/9 6:59:13

STM32（十二）：DMA直接存储器存取

DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设和存储器或者存储器和存储器之间的高速数据传输&#xff0c;无须CPU干预&#xff0c;节省了CPU的资源。&#xff08;运行内存SRAM、程序存储器Flash、寄存器&#xff09; 12个独立可配置的通道&…...

编程日记 2024/9/9 6:57:11

关于我2020年7月至今(2024.9)的“炒股”经历和感受

声明&#xff1a;我远不是一个成熟的投资者(这个名词太大了&#xff0c;我那三瓜两枣似乎完全配不上投资者这三个字&#xff0c;或者“小小散”更加贴切)。本文不构成任何入(股)市的引导或者买卖股票的建议。 “炒股”这个词&#xff0c;相信绝大多数人看来都-是一个贬义词&…...

编程日记 2024/9/9 6:55:08

【Tools】Prompt Engineering简介

摇来摇去摇碎点点的金黄 伸手牵来一片梦的霞光 南方的小巷推开多情的门窗 年轻和我们歌唱 摇来摇去摇着温柔的阳光 轻轻托起一件梦的衣裳 古老的都市每天都改变模样 &#x1f3b5; 方芳《摇太阳》 大模型中的Prompt Engineering是指为了提高大模型在特定任…...

编程日记 2024/9/9 6:53:06

多路转接之select(fd_set介绍,参数详细介绍),实现非阻塞式网络通信

目录 多路转接之select 引入 介绍 fd_set 函数原型 nfds readfds / writefds / exceptfds readfds 总结 fd_set操作接口 timeout timevalue 结构体 传入值 返回值 代码 注意点 -- 调用函数 select的参数填充 获取新连接 注意点 -- 通信时的调用函数 添…...

编程日记 2024/9/9 6:52:04

乐鑫安全制造全流程

主要参考资料&#xff1a; 【乐鑫全球开发者大会】DevCon24 #10 &#xff5c;乐鑫安全制造全流程 乐鑫官方文档Flash加密: https://docs.espressif.com/projects/esp-idf/zh_CN/latest/esp32/security/flash-encryption.html 【ESP32S3】使用 Flash 下载工具完成 Flash 加密功能…...

编程日记 2024/9/9 6:47:50

〖open-mmlab: MMDetection〗解析文件：configs/_base_/schedules

详细解析三个训练调度文件&#xff1a;schedule_1x.py、schedule_2x.py、schedule_20e.py 在深度学习模型训练过程中&#xff0c;训练调度&#xff08;Training Schedule&#xff09;是至关重要的&#xff0c;它决定了模型训练过程中学习率&#xff08;Learning Rate, LR&…...

编程日记 2024/9/9 6:46:49

Android之Handler是如何保证延迟发送的

目录 核心组件延迟发送消息的工作原理具体步骤1. 创建 Handler:2.发送延迟消息3.消息入队列4.消息出队和处理: 关键点总结 在 Android 中&#xff0c;Handler 是用于在不同线程之间传递和处理消息的工具。它可以用于定时任务、延迟执行任务等。Handler 如何保证延迟发送消息的核…...

编程日记 2024/9/9 6:45:45

定位信标、基站、标签，定位信标是什么

定位信标、基站、标签&#xff0c;定位信标是什么 今天给各位分享定位信标、基站、标签的知识&#xff0c;其中也会对定位信标是什么进行解释&#xff0c;如果能碰巧解决你现在面临的问题&#xff0c;别忘了关注本站&#xff0c;现在开始吧&#xff01; 怎样做人员定位啊? 〖…...

编程日记 2024/9/9 6:44:43

2024国赛数学建模B题完整分析参考论文38页（含模型和可运行代码）

2024 高教社杯全国大学生数学建模完整分析参考论文 B 题 生产过程中的决策问题 目录 摘要 一、问题重述 二、问题分析 三、 模型假设 四、 模型建立与求解 4.1问题1 4.1.1问题1思路分析 4.1.2问题1模型建立 4.1.3问题1样例代码&#xff08;仅供参考&#xff09; 4.…...

编程日记 2024/9/9 6:41:37

Hive是什么？

Apache Hive 是一个基于 Hadoop 的数据仓库工具&#xff0c;用于在 Hadoop 分布式文件系统&#xff08;HDFS&#xff09;上管理和查询大规模结构化数据集。Hive 提供了一个类似 SQL 的查询语言&#xff0c;称为 HiveQL&#xff0c;通过这种语言可以在 HDFS 上执行 MapReduce 作…...

编程日记 2024/9/9 6:34:27

计算机网络：http协议

计算机网络&#xff1a;http协议 一、本文内容与前置知识点1. 本文内容2. 前置知识点 二、HTTP协议工作简介1. 特点2. 传输时间分析3. http报文结构 三、HTTP版本迭代1. HTTP1.0和HTTP1.1主要区别2. HTTP1.1和HTTP2主要区别3. HTTPS与HTTP的主要区别 四、参考文献 一、本文内容…...

编程日记 2024/9/9 6:33:26

【stata】自写命令分享dynamic_est，一键生成dynamic effect

1. 命令简介 dynamic_est 是一个用于可视化动态效应&#xff08;dynamic effect&#xff09;的工具。它特别适用于事件研究&#xff08;event study&#xff09;或双重差分&#xff08;Difference-in-Differences, DID&#xff09;分析。通过一句命令即可展示动态效应&#xf…...

编程日记 2024/9/9 6:31:23

文心一言 VS 讯飞星火 VS chatgpt （342）-- 算法导论23.2 1题

一、对于同一个输入图&#xff0c;Kruskal算法返回的最小生成树可以不同。这种不同来源于对边进行排序时&#xff0c;对权重相同的边进行的不同处理。证明&#xff1a;对于图G的每棵最小生成树T&#xff0c;都存在一种办法来对G的边进行排序&#xff0c;使得Kruskal算法所返回的…...

编程日记 2024/9/9 6:29:17

部署若依Spring boot项目

nohup和& nohup命令解释 nohup命令：nohup 是 no hang up 的缩写，就是不挂断的意思，但没有后台运行，终端不能标准输入。 nohup ：不挂断的运行，注意并没有后台运行的功能，就是指，用nohup运行命令可以使命令永久的执行下去，和用户终端没有关系，注意了nohup没有后台…...

编程日记 2024/9/9 6:27:09

oc打包：权限弹窗无法正常弹出

在遇到编写了权限无法弹出弹窗时，需要查看是不是调用时机不对，这里直接教万能改法。 将权限获取方法编写在applicationDidBecomeActive 进入前台的生命周期接口中，如下： if (@available(iOS 14, *)) {NSLog<...

编程日记 2024/9/9 6:26:05

深入理解RxJava：响应式编程的现代方式

在当今的软件开发世界中&#xff0c;异步编程和事件驱动的架构变得越来越重要。RxJava&#xff0c;作为响应式编程&#xff08;Reactive Programming&#xff09;的一个流行库&#xff0c;为Java和Android开发者提供了一种强大的方式来处理异步任务和事件流。本文将深入探讨RxJ…...

编程日记 2024/9/9 6:25:04

Maven 依赖漏洞扫描检查插件 dependency-check-maven 的使用

前言 在现代软件开发中&#xff0c;开源库的使用愈加普遍&#xff0c;然而这些开源库中的漏洞往往会成为潜在的安全风险。如何及时的发现依赖的第三方库是否存在漏洞&#xff0c;就变成很重要了。 本文向大家推荐一款可以进行依赖包漏洞检查的 maven 插件 dependency-check-m…...

编程日记 2024/9/9 6:24:02

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2026/1/14 22:12:47

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

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. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/2/7 0:28:16

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2026/2/1 4:14:14

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2026/1/25 14:15:52