CSS系列之Float浮动（二）
一、传统网页布局
网页布局的本质：用 CSS 来摆放盒子，把盒子摆放到相应位置。CSS 提供了三种传统布局方式（这里指的只是传统布局，其实还有一些特殊高级的布局方式）：
- 标准流
- 浮动
- 定位
1、所谓的标准流：就是标签按照规定好的默认方式排列。
- 块级元素会独占一行，从上向下顺序排列。
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
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、浮动元素会脱离标准流
脱离标准普通流的控制移动到指定位置（俗称脱标），浮动的盒子不再保留原先的位置。
<!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浮动（二）
一、传统网页布局 网页布局的本质：用 CSS 来摆放盒子，把盒子摆放到相应位置。CSS 提供了三种传统布局方式（这里指的只是传统布局，其实还有一些特殊高级的布局方式）： 标准流浮动定位 1、所谓的标准流&#…...
macos下的 sed命令安装与使用 gnu-sed
sed命令是我们在linu类系统中非常重要的一个命令, 但是在macos下面默认是没有sed命令的, 不过我们可以通过brew install gnu-sed ( 或者通过 sudo port install gsed )这个软件包来获得这个命令 GNU sed 命令安装 下面2种方式,选择一种安装即可 # brew安装 brew install gn…...
RLC（电阻、电感、电容）
RLC（电阻、电感、电容） 目录一、两个电阻（R1，R2），电容（C1，C2）的串联/并联公式？二、请画出这个1ms， 1V的Vin脉冲信号在Vout端的大致图像1.电路图2.…...
语音测试（一）ffmpeg视频转音频
视频转音频 下载ffmpeg工具进入bin目录cmd进入控制台输入命令 ffmpeg.exe -i ./视频.mp4 ./音频.wav命令说明 ffmpeg -i input.mp4 output.mkv FFmpeg 可能会尝试自动选择合适的编码器对视频和音频进行重新编码，以便适应 MKV 格式的要求ffmpeg -i input.mp4 -c c…...
计算机网络八股文之TCP协议
TCP/IP模型 链路层 物理层：主要定义物理设备标准，如网线的接口类型、光纤的接口类型、各种传输介质的传输速率等。它的主要作用是传输比特流（就是由1、0转化为电流强弱来进行传输，到达目的地后再转化为1、0，也就是我们…...
【linux】linux中如何通过stress进行压力测试，原理解析与应用实战
✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全…...
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)…...
开源通用验证码识别OCR —— DdddOcr 源码赏析(二)
文章目录 前言DdddOcr分类识别调用识别功能classification 函数源码classification 函数源码解读1. 分类功能不支持目标检测2. 转换为Image对象3. 根据模型配置调整图片尺寸和色彩模式4. 图像数据转换为浮点数据并归一化5. 图像数据预处理6. 运行模型，返回预测结果 …...
【个人笔记】VCS工具与命令
Title：VCS工具学习 一 介绍 是什么？ VCS (Verilog Compiler Simulator) 是synopsys的verilog 仿真软件，竞品有Mentor公司的Modelsim、Cadence公司的NC-Verilog、Verilog—XL. VCS能够 分析、编译 HDL的design code，同时内置了 仿…...
面试进去8分钟就出来了，问的问题有点变态。。。
从小厂出来，没想到在另一家公司又寄了。 到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%,这…...
探索MongoDB的Python之钥：pymongo的魔力
文章目录 探索MongoDB的Python之钥：pymongo的魔力背景：为什么选择pymongo？简介：pymongo是什么？安装：如何将pymongo纳入你的项目？基础用法：五个核心函数介绍1. 连接到MongoDB2. 选择数…...
【数据结构】顺序表和链表——顺序表（包含丰富算法题）
文章目录 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. 线性表 线性表（linear list）…...
pod基础和镜像拉取策略
目录 pod概念 pod的分类 1.基础容器 pause 2.初始化容器 init 实验：定义初始化容器 init容器的作用 实验：如何在容器内部进行挂载 镜像拉取策略 pod概念 pod是k8s里面的最小单位，pod也是最小化运行容器的资源对象。容器是基于pod在k…...
53 mysql pid 文件的创建
前言 接上一篇文章 mysql 启动过程中常见的相关报错信息 在 mysql 中文我们在 “service mysql start”, “service mysql stop” 经常会碰到 mysql.pid 相关的错误信息 比如 “The server quit without updating PID file” 我们这里来看一下 mysql 中 mysql.pid 文件的…...
前端---对MVC MVP MVVM的理解
就需要从前端这些年的从无到有、从有到优的变迁过程讲一下。 1. Web1.0时代 在web1.0时代并没有前端的概念，开发一个web应用多数采用ASP.NET/Java/PHP编写，项目通常用多个aspx/jsp/php文件构成，每个文件中同时包含了HTML、CSS、JavaScript、…...
深度学习 --- VGG16能让某个指定的feature map激活值最大化图片的可视化(JupyterNotebook实战)
VGG16能让某个指定的feature map激活值最大化图片的可视化 在前面的文章中，我用jupyter notebook分别实现了，预训练好的VGG16模型各层filter权重的可视化和给VGG16输入了一张图像，可视化VGG16各层的feature map。深度学习 --- VGG16卷积核的可…...
1990-2022年各地级市gdp、一二三产业gdp及人均gdp数据
1990-2022年各地级市gdp、一二三产业gdp及人均gdp数据 1、时间：1990-2022年 2、来源：城市统计年鉴 3、指标：年度、城市名称、城市代码、城市类别、省份标识、省份名称、国内生产总值/亿元、第一产业占GDP比重(%)、第二产业占GDP比重(%)、第…...
c++ 原型模式
文章目录 什么是原型模式为什么要使用原型模式使用场景示例 什么是原型模式 用原型实例指定创建对象的种类，并通过拷贝这些原型创建新的对象，简单理解就是“克隆指定对象” 为什么要使用原型模式 原型模式（Prototype Pattern）是…...
论tomcat线程池和spring封装的线程池
Tomcat 中的线程池是什么？ 内部线程池：Tomcat 确实有一个内部的线程池，用于处理 HTTP 请求，通常是org.apache.tomcat.util.threads.ThreadPoolExecutor 类的实例。这个线程池专门用于处理进入的 HTTP 请求和发送响应。可以通过 T…...
阿里P7大牛整理自动化测试高频面试题
最近好多粉丝咨询我，有没有软件测试方面的面试题，尤其是Python自动化测试相关的最新面试题，所以今天给大家整理了一份，希望能帮助到你们。 接口测试基础 1、公司接口测试流程是什么？ 从开发那边获取接口设计文档、分…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
ESP32读取DHT11温湿度数据
芯片：ESP32 环境：Arduino 一、安装DHT11传感器库 红框的库，别安装错了 二、代码 注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...
Java求职者面试指南：计算机基础与源码原理深度解析
Java求职者面试指南：计算机基础与源码原理深度解析 第一轮提问：基础概念问题 1. 请解释什么是进程和线程的区别？ 面试官：进程是程序的一次执行过程，是系统进行资源分配和调度的基本单位；而线程是进程中的…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
ubuntu22.04有线网络无法连接，图标也没了
今天突然无法有线网络无法连接任何设备，并且图标都没了 错误案例 往上一顿搜索，试了很多博客都不行，比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动，重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...