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

CSS系列之Float浮动（二）

news 2025/11/11 14:36:42

一、传统网页布局

网页布局的本质：用 CSS 来摆放盒子，把盒子摆放到相应位置。CSS 提供了三种传统布局方式（这里指的只是传统布局，其实还有一些特殊高级的布局方式）：

  • 标准流
  • 浮动
  • 定位

1、所谓的标准流：就是标签按照规定好的默认方式排列。

  1. 块级元素会独占一行，从上向下顺序排列。
  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

2、所谓的定位，可以看一下我的这篇文章，是利用Position属性来控制盒子在文档中位置：CSS之Position定位（一）-CSDN博客 

3、为什么需要浮动：因为浮动可以改变元素标签默认的排列方式。这句话不好直观理解，我们下面将结合代码和案例做进一步的详细说明。

二、什么是浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

选择器 { float: 属性值;}

属性值描述
none元素不浮动（默认值）
left元素向左浮动
right元素向右浮动

代码案例欣赏： 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 浮动的标签  顶对齐 *//* 浮动: 在一行排列, 宽高生效 -- 浮动后的标签具备行内块特点 */.one {width: 100px;height: 100px;background-color: pink;float: left;margin-top: 50px;}.two {width: 200px;height: 200px;background-color: skyblue;float: left;/* 因为有浮动, 不能生效 - 盒子无法水平居中 */margin: 0 auto;}.three {width: 300px;height: 300px;background-color: orange;}</style>
</head>
<body><div class="one">one</div><div class="two">two</div><div class="three">three</div>
</body>
</html>

效果如下：可以看到one和two脱离文档往左浮动，three是一个文档流的布局

三、浮动特性（重难点） 

加了浮动之后的元素，会具有很多特性，需要我们掌握。

  1. 浮动元素会脱离标准流（脱标）
  2. 浮动的元素会一行内显示并且元素顶部对齐
  3. 浮动的元素会具有行内块元素的特性

1、浮动元素会脱离标准流 

脱离标准普通流的控制移动到指定位置（俗称脱标），浮动的盒子不再保留原先的位置。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮动特性1</title><style>/* 设置了浮动（float）的元素会：1.脱离标准普通流的控制（浮）移动到指定位置（动）。2.浮动的盒子不再保留原先的位置 */.box1 {float: left;width: 200px;height: 200px;background-color: pink;}.box2 {width: 300px;height: 300px;background-color: gray;}</style>
</head><body><div class="box1">浮动的盒子</div><div class="box2">标准流的盒子</div>
</body></html>

 效果如下：

 2、浮动的元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮动元素特性-浮动元素一行显示</title><style>div {float: left;width: 200px;height: 200px;background-color: pink;}.two {background-color: skyblue;height: 249px;}.four {background-color: skyblue;}</style>
</head><body><div>1</div><div class="two">2</div><div>3</div><div class="four">4</div>
</body></html>

效果如下：

3、浮动的元素会具有行内块元素的特性 

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性：

默认宽度由内容决定，同时支持指定高宽，盒子之间无空隙。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮动的元素具有行内块元素特点</title><style>/* 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。 */span,div {float: left;width: 200px;height: 100px;background-color: pink;}/* 如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度 */p {float: right;height: 200px;background-color: skyblue;}</style>
</head><body><span>span1</span><span>span2</span><div>div</div><p>pppppppppppppp</p>
</body></html>

注意：之所以顶部没有对齐，原因是 p 标签自带的外边距大于 span div 自带的外边距。

四、浮动元素经常和标准流父级搭配使用 

为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局第一准侧。

效果一：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮动元素搭配标准流父盒子1</title><style>.box {width: 1200px;height: 460px;background-color: black;margin: 0 auto;}.left {float: left;width: 230px;height: 460px;background-color: pink;}.right {float: left;width: 970px;height: 460px;background-color: skyblue;}</style>
</head><body><div class="box"><div class="left">左侧</div><div class="right">右侧</div></div>
</body></html>

效果二： 

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮动元素搭配标准流父盒子2</title><style>* {margin: 0;padding: 0;}/* 取消 li 前的圆点 */li {list-style: none;}.box {width: 1226px;height: 285px;background-color: pink;/* 让大盒子水平居中 */margin: 0 auto;}.box li {width: 296px;height: 285px;background-color: gray;float: left;/* 每个小盒子用右边距隔开 */margin-right: 14px;}/* 取消最后一个小盒子的右外边距 *//* 这里必须写 .box .last 要注意权重的问题  20 */.box .last {margin-right: 0;}</style>
</head><body><ul class="box"><li>1</li><li>2</li><li>3</li><li class="last">4</li></ul>
</body></html>

效果三：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮动布局练习3</title><style>.box {width: 1226px;height: 615px;background-color: pink;margin: 0 auto;}.left {float: left;width: 234px;height: 615px;background-color: gray;}.right {float: left;width: 992px;height: 615px;background-color: skyblue;}.right>div {float: left;width: 234px;height: 300px;background-color: pink;margin-left: 14px;margin-bottom: 14px;}</style>
</head><body><div class="box"><div class="left">左青龙</div><div class="right"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div></div>
</body></html>

关于浮动的一些基本理解就先说到这里，更多新的知识和技能我们将在后续逐步探究和讲解，感谢你的观看和订阅。 

相关文章：

CSS系列之Float浮动（二）

一、传统网页布局 网页布局的本质&#xff1a;用 CSS 来摆放盒子&#xff0c;把盒子摆放到相应位置。CSS 提供了三种传统布局方式&#xff08;这里指的只是传统布局&#xff0c;其实还有一些特殊高级的布局方式&#xff09;&#xff1a; 标准流浮动定位 1、所谓的标准流&#…...

编程日记 2024/9/6 18:03:49

macos下的 sed命令安装与使用 gnu-sed

sed命令是我们在linu类系统中非常重要的一个命令, 但是在macos下面默认是没有sed命令的, 不过我们可以通过brew install gnu-sed ( 或者通过 sudo port install gsed )这个软件包来获得这个命令 GNU sed 命令安装 下面2种方式,选择一种安装即可 # brew安装 brew install gn…...

编程日记 2024/9/6 18:02:48

RLC（电阻、电感、电容）

RLC&#xff08;电阻、电感、电容&#xff09; 目录一、两个电阻&#xff08;R1&#xff0c;R2&#xff09;&#xff0c;电容&#xff08;C1&#xff0c;C2&#xff09;的串联/并联公式&#xff1f;二、请画出这个1ms&#xff0c; 1V的Vin脉冲信号在Vout端的大致图像1.电路图2.…...

编程日记 2024/9/6 18:01:46

语音测试（一）ffmpeg视频转音频

视频转音频 下载ffmpeg工具进入bin目录cmd进入控制台输入命令 ffmpeg.exe -i ./视频.mp4 ./音频.wav命令说明 ffmpeg -i input.mp4 output.mkv FFmpeg 可能会尝试自动选择合适的编码器对视频和音频进行重新编码&#xff0c;以便适应 MKV 格式的要求ffmpeg -i input.mp4 -c c…...

编程日记 2024/9/6 17:59:44

计算机网络八股文之TCP协议

TCP/IP模型 链路层 物理层&#xff1a;主要定义物理设备标准&#xff0c;如网线的接口类型、光纤的接口类型、各种传输介质的传输速率等。它的主要作用是传输比特流&#xff08;就是由1、0转化为电流强弱来进行传输&#xff0c;到达目的地后再转化为1、0&#xff0c;也就是我们…...

编程日记 2024/9/6 17:58:43

【linux】linux中如何通过stress进行压力测试，原理解析与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全…...

编程日记 2024/9/6 17:56:41

python用波形显示udp数据实现一个模拟示波器

显示端代码： import socket import matplotlib.pyplot as plt import matplotlib.animation as animation import numpy as np# UDP setup udp_ip = 0.0.0.0 # Listen on all network interfaces udp_port = 12345 sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)…...

编程日记 2024/9/6 17:53:38

开源通用验证码识别OCR —— DdddOcr 源码赏析(二)

文章目录 前言DdddOcr分类识别调用识别功能classification 函数源码classification 函数源码解读1. 分类功能不支持目标检测2. 转换为Image对象3. 根据模型配置调整图片尺寸和色彩模式4. 图像数据转换为浮点数据并归一化5. 图像数据预处理6. 运行模型&#xff0c;返回预测结果 …...

编程日记 2024/9/6 17:51:37

【个人笔记】VCS工具与命令

Title&#xff1a;VCS工具学习 一 介绍 是什么&#xff1f; VCS (Verilog Compiler Simulator) 是synopsys的verilog 仿真软件&#xff0c;竞品有Mentor公司的Modelsim、Cadence公司的NC-Verilog、Verilog—XL. VCS能够 分析、编译 HDL的design code&#xff0c;同时内置了 仿…...

编程日记 2024/9/6 17:49:35

面试进去8分钟就出来了，问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%,这…...

编程日记 2024/9/6 17:47:32

探索MongoDB的Python之钥：pymongo的魔力

文章目录 探索MongoDB的Python之钥&#xff1a;pymongo的魔力背景&#xff1a;为什么选择pymongo&#xff1f;简介&#xff1a;pymongo是什么&#xff1f;安装&#xff1a;如何将pymongo纳入你的项目&#xff1f;基础用法&#xff1a;五个核心函数介绍1. 连接到MongoDB2. 选择数…...

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

【数据结构】顺序表和链表——顺序表（包含丰富算法题）

文章目录 1. 线性表2. 顺序表2.1 概念与结构2.2 分类2.2.1 静态顺序表2.2.2 动态顺序表 2.3 动态顺序表的实现2.4 顺序表算法题2.4.1 移除元素2.4.2 删除有序数组中的重复项2.4.3 合并两个有序数组 2.5 顺序表问题与思考 1. 线性表 线性表&#xff08;linear list&#xff09;…...

编程日记 2024/9/6 17:44:30

pod基础和镜像拉取策略

目录 pod概念 pod的分类 1.基础容器 pause 2.初始化容器 init 实验&#xff1a;定义初始化容器 init容器的作用 实验&#xff1a;如何在容器内部进行挂载 镜像拉取策略 pod概念 pod是k8s里面的最小单位&#xff0c;pod也是最小化运行容器的资源对象。容器是基于pod在k…...

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

53 mysql pid 文件的创建

前言 接上一篇文章 mysql 启动过程中常见的相关报错信息 在 mysql 中文我们在 “service mysql start”, “service mysql stop” 经常会碰到 mysql.pid 相关的错误信息 比如 “The server quit without updating PID file” 我们这里来看一下 mysql 中 mysql.pid 文件的…...

编程日记 2024/9/6 17:41:28

前端---对MVC MVP MVVM的理解

就需要从前端这些年的从无到有、从有到优的变迁过程讲一下。 1. Web1.0时代 在web1.0时代并没有前端的概念&#xff0c;开发一个web应用多数采用ASP.NET/Java/PHP编写&#xff0c;项目通常用多个aspx/jsp/php文件构成&#xff0c;每个文件中同时包含了HTML、CSS、JavaScript、…...

编程日记 2024/9/6 17:39:25

深度学习 --- VGG16能让某个指定的feature map激活值最大化图片的可视化(JupyterNotebook实战)

VGG16能让某个指定的feature map激活值最大化图片的可视化 在前面的文章中&#xff0c;我用jupyter notebook分别实现了&#xff0c;预训练好的VGG16模型各层filter权重的可视化和给VGG16输入了一张图像&#xff0c;可视化VGG16各层的feature map。深度学习 --- VGG16卷积核的可…...

编程日记 2024/9/6 17:34:20

1990-2022年各地级市gdp、一二三产业gdp及人均gdp数据

1990-2022年各地级市gdp、一二三产业gdp及人均gdp数据 1、时间&#xff1a;1990-2022年 2、来源&#xff1a;城市统计年鉴 3、指标&#xff1a;年度、城市名称、城市代码、城市类别、省份标识、省份名称、国内生产总值/亿元、第一产业占GDP比重(%)、第二产业占GDP比重(%)、第…...

编程日记 2024/9/6 17:33:19

c++ 原型模式

文章目录 什么是原型模式为什么要使用原型模式使用场景示例 什么是原型模式 用原型实例指定创建对象的种类&#xff0c;并通过拷贝这些原型创建新的对象&#xff0c;简单理解就是“克隆指定对象” 为什么要使用原型模式 原型模式&#xff08;Prototype Pattern&#xff09;是…...

编程日记 2024/9/6 17:30:15

论tomcat线程池和spring封装的线程池

Tomcat 中的线程池是什么&#xff1f; 内部线程池&#xff1a;Tomcat 确实有一个内部的线程池&#xff0c;用于处理 HTTP 请求&#xff0c;通常是org.apache.tomcat.util.threads.ThreadPoolExecutor 类的实例。这个线程池专门用于处理进入的 HTTP 请求和发送响应。可以通过 T…...

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

阿里P7大牛整理自动化测试高频面试题

最近好多粉丝咨询我&#xff0c;有没有软件测试方面的面试题&#xff0c;尤其是Python自动化测试相关的最新面试题&#xff0c;所以今天给大家整理了一份&#xff0c;希望能帮助到你们。 接口测试基础 1、公司接口测试流程是什么&#xff1f; 从开发那边获取接口设计文档、分…...

编程日记 2024/9/6 17:27:13

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/11/10 22:23:33

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/11/10 22:31:49

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/11/7 19:59:13

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/11/7 20:25:41

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/8/21 15:41:11

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2025/11/7 20:04:27

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/11/9 21:18:43

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/9/11 5:41:27

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2025/11/7 20:31:15