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

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

news 2026/5/25 0:01:33

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

云原生事件驱动架构：构建高效的事件处理系统

云原生事件驱动架构&#xff1a;构建高效的事件处理系统 引言 在云原生环境中&#xff0c;事件驱动架构是一种高效的系统设计模式。通过事件驱动&#xff0c;可以实现松耦合、高可用的系统。事件驱动架构已经成为构建现代化应用的重要方法。 作为一名资深的DevOps工程师&#x…...

编程新知 2026/5/24 23:55:18

Nginx基于反向代理的负载均衡

一、引言&#xff1a;从单点到集群&#xff0c;流量分发的艺术当你的应用用户量从几百飙升到几万&#xff0c;单台服务器很快就会成为性能瓶颈&#xff0c;甚至面临宕机风险。此时&#xff0c;最直接有效的解决方案就是横向扩展——部署多台服务器组成集群。但新问题随之而来&a…...

编程新知 2026/5/24 23:45:06

用 AutoGen 编排多智能体协作，让 AI 团队帮你干活

&#x1f9d1;‍&#x1f4bb; 博主介绍 & 诚邀关注 作者&#xff1a;专注于 Java、Python、前端开发的技术博主 | 全网粉丝 30 万 在校期间协助导师完成毕业设计课题分类、论文格式初审及代码整理工作&#xff1b;工作后持续分享毕设思路&#xff0c;助力毕业生顺利完成…...

编程新知 2026/5/24 21:48:59

一直怕大模型幻觉，发现针对性harness约束能大大消除

我让AI写长文&#xff0c;然后人工审核&#xff0c;发现大量胡编乱造。 如果人工一个个消除&#xff0c;实在太累了&#xff0c;这就不是LLM自动化办公的路子了 尝试了 harness (engineering)的实操路子&#xff0c; 试用发现&#xff1a; 大模型正在把长文中我人工审核发现的幻…...

编程新知 2026/5/24 21:27:58

矩阵补全与因果推断：评估贸易协定效应的前沿方法与实践

1. 项目概述&#xff1a;当贸易协定遇上因果推断&#xff0c;我们如何看清真实影响&#xff1f;做贸易政策评估这行久了&#xff0c;最头疼的就是“识别”问题。一个贸易协定签了&#xff0c;双边贸易额涨了&#xff0c;你很难说清这增长里有多少是协定本身的功劳&#xff0c;有…...

编程新知 2026/5/24 20:12:53

ssm网上订餐系统（10089）

有需要的同学&#xff0c;源代码和配套文档领取&#xff0c;加文章最下方的名片哦 一、项目演示 项目演示视频 二、资料介绍 完整源代码&#xff08;前后端源代码SQL脚本&#xff09;配套文档&#xff08;LWPPT开题报告/任务书&#xff09;远程调试控屏包运行一键启动项目&…...

编程新知 2026/5/24 19:43:18

5分钟快速上手：DouYinBot抖音无水印视频解析工具终极指南

5分钟快速上手&#xff1a;DouYinBot抖音无水印视频解析工具终极指南 【免费下载链接】DouYinBot 该项目仅自用&#xff0c;不提供抖音视频下载 项目地址: https://gitcode.com/gh_mirrors/do/DouYinBot 在短视频创作火爆的今天&#xff0c;你是否曾为抖音视频上的水印而…...

编程新知 2026/5/24 19:41:15

跟着 MDN 学CSS day_14：（尺寸调整技能测试与实战解析）

在掌握了 CSS 元素尺寸调整的理论知识之后&#xff0c;实际动手练习是检验理解程度的最佳方式。MDN 的"Test your skills: Sizing"这一节提供了三个精心设计的任务&#xff0c;分别覆盖了最小高度与固定高度的区别、百分比宽度与内边距在 border-box 模型下的计算、以…...

编程新知 2026/5/24 19:35:11

跟着 MDN 学CSS day_12 ：（值与单位的技能测试与深入理解）

在学习 CSS 的过程中&#xff0c;值与单位是决定样式精确性和灵活性的关键知识。颜色值怎么写、字体大小用 px 还是 em、背景图怎么定位&#xff0c;这些看似基础的问题&#xff0c;实际上直接影响到页面的可维护性、响应式表现和视觉效果。MDN 的"Test your skills: Valu…...

编程新知 2026/5/24 19:35:11

i茅台自动预约系统终极指南：从零搭建智能抢购平台 [特殊字符]

i茅台自动预约系统终极指南&#xff1a;从零搭建智能抢购平台 &#x1f680; 【免费下载链接】campus-imaotai i茅台app自动预约&#xff0c;每日自动预约&#xff0c;支持docker一键部署&#xff08;本项目不提供成品&#xff0c;使用的是已淘汰的算法&#xff09; 项目地址…...

编程新知 2026/5/24 18:59:56