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

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

news 2025/11/5 2:01:26

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

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/10/31 14:49:35

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/11/2 21:23:47

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/11/3 19:35:48

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…...

编程新知 2025/10/19 0:02:23

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/11/3 13:24:40

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...

编程新知 2025/10/30 7:44:10

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

编程新知 2025/9/23 9:23:07

字符串哈希+KMP

P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...

编程新知 2025/10/16 19:06:37

从零手写Java版本的LSM Tree （一）：LSM Tree 概述

&#x1f525; 推荐一个高质量的Java LSM Tree开源项目&#xff01; https://github.com/brianxiadong/java-lsm-tree java-lsm-tree 是一个从零实现的Log-Structured Merge Tree&#xff0c;专为高并发写入场景设计。 核心亮点&#xff1a; ⚡ 极致性能&#xff1a;写入速度超…...

编程新知 2025/10/26 17:36:44

shell脚本质数判断

shell脚本质数判断 shell输入一个正整数,判断是否为质数(素数&#xff09;shell求1-100内的质数shell求给定数组输出其中的质数 shell输入一个正整数,判断是否为质数(素数&#xff09; 思路&#xff1a; 1:1 2:1 2 3:1 2 3 4:1 2 3 4 5:1 2 3 4 5-------> 3:2 4:2 3 5:2 3…...

编程新知 2025/10/21 18:57:29