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

CSS系列之Float浮动（二）

news 2025/6/18 20:12:50

一、传统网页布局

网页布局的本质：用 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、所谓的标准流&#…...

编程日记 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（电阻、电感、电容） 目录一、两个电阻（R1，R2），电容（C1，C2）的串联/并联公式？二、请画出这个1ms， 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 可能会尝试自动选择合适的编码器对视频和音频进行重新编码，以便适应 MKV 格式的要求ffmpeg -i input.mp4 -c c…...

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

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

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

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

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

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

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

显示端代码： 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. 运行模型，返回预测结果 …...

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

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

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

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

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

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

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

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

文章目录探索MongoDB的Python之钥：pymongo的魔力背景：为什么选择pymongo？简介：pymongo是什么？安装：如何将pymongo纳入你的项目？基础用法：五个核心函数介绍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. 线性表线性表（linear list）…...

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

pod基础和镜像拉取策略

目录 pod概念 pod的分类 1.基础容器 pause 2.初始化容器 init 实验：定义初始化容器 init容器的作用实验：如何在容器内部进行挂载镜像拉取策略 pod概念 pod是k8s里面的最小单位，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时代并没有前端的概念，开发一个web应用多数采用ASP.NET/Java/PHP编写，项目通常用多个aspx/jsp/php文件构成，每个文件中同时包含了HTML、CSS、JavaScript、…...

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

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

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

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

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

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

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

c++ 原型模式

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

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

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

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

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

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

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

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

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...

编程新知 2025/6/17 10:28:36

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/6/16 18:21:53

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录零、概述：指针 vs. 引用（类比其他语言）一、指针基础概念二、指针声明与初始化三、指针操作符1. &：取地址（拿到内存地址）2. *：解引用（拿到值） 四、空指针&am…...

编程新知 2025/6/16 3:41:53

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标代码简洁精炼、美观，可持续性好高效率高复用，可移植性好高内聚，低耦合没有冗余规范性，代码有规可循，可以看出自己当时的思考过程特殊排版，特殊语法，特殊指令，必须…...

编程新知 2025/6/16 6:50:39

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。一、负载模块基本结构一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/6/16 21:21:46