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

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

news 文章来源：https://blog.csdn.net/qq_54641174/article/details/141830008 2025/5/10 20:44:52

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

2. 下载rknn-toolkit2项目

官网链接&#xff1a; https://github.com/airockchip/rknn-toolkit2 安装好git&#xff1a;[[1. Git的安装]] 下载项目&#xff1a; git clone https://github.com/airockchip/rknn-toolkit2.git或者直接去github下载压缩文件&#xff0c;解压即可。...

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

xhr、ajax、axois、fetch的区别

一、XMLHttpRequest (XHR)、AJAX、Axios 和 Fetch API 都是用于在不重新加载整个页面的情况下与服务器进行通信的技术和库。它们在处理超时、终止请求、进度反馈等机制上有一些显著的差异。以下是它们的详细比较&#xff1a; 1. XMLHttpRequest (XHR) XMLHttpRequest 是一种浏…...

编程日记 2024/9/9 6:21:51

【HuggingFace Transformers】OpenAIGPTModel源码解析

OpenAIGPTModel源码解析 1. GPT 介绍2. OpenAIGPTModel类 源码解析 说到ChatGPT&#xff0c;大家可能都使用过吧。2022年&#xff0c;ChatGPT的推出引发了广泛的关注和讨论。这款对话生成模型不仅具备了强大的语言理解和生成能力&#xff0c;还能进行非常自然的对话&#xff0c…...

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

macOS安装Java和Maven

安装Java Java Downloads | Oracle 官网下载默认说最新的Java22版本&#xff0c;注意这里我们要下载的是Java8&#xff0c;对应的JDK1.8 需要登陆Oracle&#xff0c;没有账号的可以百度下。账号:908344069qq.com 密码:Java_2024 Java8 jdk1.8配置环境变量 open -e ~/.bash_p…...

编程日记 2024/9/9 6:19:48

SpringBoot教程（安装篇） | Elasticsearch的安装

SpringBoot教程&#xff08;安装篇&#xff09; | Elasticsearch的安装 一、确定Elasticsearch版本二、下载elasticsearch&#xff08;windows版本&#xff09;官网下载如何解压配置 允许 别人跨域 访问自己启动运行 三、Es可视化工具安装&#xff08;elasticsearch-head&#…...

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

前端登录鉴权——以若依Ruoyi前后端分离项目为例解读

权限模型 Ruoyi框架学习——权限管理_若依框架权限-CSDN博客 用户-角色-菜单&#xff08;User-Role-Menu&#xff09;模型是一种常用于权限管理的设计模式&#xff0c;用于实现系统中的用户权限控制。该模型主要包含以下几个要素&#xff1a; 用户&#xff08;User&#xff09;…...

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

【Tools】大模型中的自注意力机制

摇来摇去摇碎点点的金黄 伸手牵来一片梦的霞光 南方的小巷推开多情的门窗 年轻和我们歌唱 摇来摇去摇着温柔的阳光 轻轻托起一件梦的衣裳 古老的都市每天都改变模样 &#x1f3b5; 方芳《摇太阳》 自注意力机制&#xff08;Self-Attention&#xff09;是一…...

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

PhotoZoom Classic 9软件新功能特性及安装激活图文教程

PhotoZoom Classic 9这款软件能够对数码图片进行放大&#xff0c;而且放大后的图片没有任何的品质的损坏&#xff0c;没有锯齿&#xff0c;不会失真&#xff0c;如果您有兴趣的话可以试试哦&#xff01; PhotoZoom Classic 9软件新功能特性 通过屡获殊荣的 S-Spline XL 插值…...

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

【数据结构】直接插入排序

目录 一、基本思想 二、动图演示 三、思路分析 四、代码实现 五、易错提醒 六、时间复杂度分析 一、基本思想 直接插入排序&#xff08;Straight Insertion Sort&#xff09;是一种简单直观的排序算法&#xff0c;其基本思想是&#xff1a; 把待排序的一个记录按其关键码…...

编程日记 2024/9/9 6:14:39

JavaScript 实现虚拟滚动技术

虚拟滚动 虚拟滚动&#xff08;有时称为 虚拟列表、虚拟滚动条&#xff09;是 JavaScript 中的一种技术&#xff0c;旨在优化大数据量的列表渲染&#xff0c;尤其是当有成千上万的数据项时&#xff0c;直接渲染整个列表会导致性能问题。虚拟列表通过只渲染用户视口中可见的那一…...

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