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

5.CSS学习（浮动）

news 2026/2/7 19:52:58

浮动（float）

        是一种传统的网页布局方式，通过浮动，可以使元素脱离文档流的控制，使其横向排列。

其编写在CSS样式中。

float:none(默认值)        元素不浮动。

float:left                        设置的元素在其包含块内左侧浮动。

float：right                 设置的元素在其包含块内右侧浮动。

 1.设置浮动之后，元素会脱离文档流中占用的内容，其后的元素自动补位。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动</title><style>/*  box4是box1,box2,box3的包含块  */.box4{height: 600px;width: 600px;margin: auto;padding: 10px;border: 10px solid orange;background-color:deepskyblue;}.box1{width: 200px;height: 200px;background-color: red;float: left;}.box2{width: 200px;height: 200px;background-color: green;}        .box3{width: 200px;height: 200px;background-color: blue;}</style>
</head>
<body><div class="box4"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div>
</body>
</html>

因为给box1设置左浮动之后，其脱离了文档流的限制，不再占用文档流中的内容，box2和box3自动补位，box1盖住了box2。

2.设置浮动以后，元素会向包含块内的左侧或右侧移动（向左向右取决于参数值） 

 box1右浮动

box1,box2,box3都左浮动

通过浮动可以让垂直排列变成水平排列。 

3.如果一行之内无法容纳所有的浮动元素，则后边的元素会自动换到下一行。    

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动</title><style>.box1{width: 200px;height: 200px;background-color: red;float: right;}.box2{width: 200px;height: 200px;background-color: green;float: right;}        .box3{width: 200px;height: 200px;background-color: blue;float: right;}.box5{width: 500px;height: 200px;background-color: purple;float: right;}/* 包含块设置 */.box4{height: 600px;width: 600px;margin: auto;padding: 10px;border: 10px solid orange;background-color:deepskyblue;}</style>
</head>
<body><div class="box4"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box5"></div>    </div></body>
</html>

 4.浮动元素不会超过它上边浮动的兄弟元素，最多一边齐。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动</title><style>.box1{width: 200px;height: 200px;background-color: red;float: left;}.box2{width: 200px;height: 200px;background-color: green;float: left;}        .box3{width: 500px;height: 200px;background-color: blue;float: left;}.box5{width: 200px;height: 200px;background-color: purple;float: right;}/* 包含块设置 */.box4{height:800px;width: 800px;margin: auto;padding: 10px;border: 10px solid orange;background-color:deepskyblue;text-align: center;line-height: 200px;font-size: 40px;}</style>
</head>
<body><div class="box4"><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div><div class="box5">box5</div>    </div></body>
</html>

box5浮动不能超过之前浮动的兄弟元素，所以最多到box3的位置，不能超过box5 

5.浮动元素不会盖住文字，文字会环绕在浮动元素周围。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动</title><!-- 浮动（float）:是一种传统的网页布局方式，通过浮动可以使元素脱离文档流的控制，而横向排列。前面学的盒子模型都是纵向排列。可选值：none(默认值)    元素不浮动left            元素向左浮动1.设置浮动以后，元素会脱离文档流中占用的内容，其后的元素会自动补位。2.设置浮动后，元素会向包含块内的内容区左侧或右侧移动（向左向右取决于参数值）3.如果一行之内无法容纳所有的浮动元素，则后边的元素会自动换到下一行。4.浮动元素不会超过它上边浮动的兄弟元素，最多一边齐。5.浮动元素不会盖住文字，文字会环绕在浮动元素周围。    --><style>.box2{width: 200px;height: 200px;background-color: red;float: left;}.box3{width: 200px;height: 200px;background-color: green;float: left;}.box4{width: 500px;height: 200px;background-color: blue;float:left;            }
/* 这里的box5没有在第一行显示，而是与box4对齐右浮动，首先因为浮动元素box4超出了包含块的宽度，所以自动换行到下一行显示，之后box5浮动时，选择与box4对齐   */.box5{width: 200px;height: 200px;background-color:purple;float: right;            }.box1{width: 800px;height: 800px;background-color: deepskyblue;padding: 10px;border: 5px orange solid;margin: auto;font-size: 40px;line-height: 200px;text-align: center;}/* 5.浮动元素不会盖住文字，文字会环绕在浮动元素周围。    */.box6{width: 200px;height: 200px;background-color: yellow;font: 40px/200px microsoft Yahei serif ;text-align: center;float: left;}p{background-color: pink;font-size: 20px;}</style>
</head>
<body><div class="box6">box6</div><p> 燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢：如今（现在 ）又到了哪里呢？我不知道他们给了我多少日子，但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。去的尽管去了，来的尽管来着，去来的中间，又怎样地匆匆呢？早上我起来的时候，小屋里射进两三方斜斜的太阳。太阳他有脚啊，轻轻悄悄地挪移了；我也茫茫然跟着旋转。于是——洗手的时候，日子从水盆里过去；吃饭的时候，日子从饭碗里过去；默默时，便从凝然的双眼前过去。我觉察他去的匆匆了，伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐俐地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢？但不能平的，为什么偏要白白走这一遭啊？你聪明的，告诉我，我们的日子为什么一去不复返呢？        </p><hr><div class="box1"><div class="box2">box2</div><div class="box3">box3</div><div class="box4">box4</div><div class="box5">box5</div></div>
</body>
</html>

相关文章：

5.CSS学习（浮动）

浮动&#xff08;float&#xff09; 是一种传统的网页布局方式&#xff0c;通过浮动&#xff0c;可以使元素脱离文档流的控制&#xff0c;使其横向排列。 其编写在CSS样式中。 float:none(默认值) 元素不浮动。 float:left 设置的元素在其包含…...

编程日记 2024/7/27 7:12:19

Spring Cloud微服务项目统一封装数据响应体

在微服务架构下&#xff0c;处理服务之间的通信和数据一致性是一个重要的挑战。为了提高开发效率、保证数据的一致性及简化前端开发&#xff0c;统一封装数据响应体是一种非常有效的实践。本文博主将介绍如何在 Spring Cloud 微服务项目中统一封装数据响应体&#xff0c;并分享…...

编程日记 2024/7/27 7:09:16

java算法day20

java算法day20 701.二叉搜索树中的插入操作450.删除二叉搜索树中的节点108 将有序数组转换为二叉搜索树 本次的题目都是用递归函数的返回值来完成&#xff0c;多熟悉这样的用法&#xff0c;很方便。 其实我感觉&#xff0c;涉及构造二叉树的题目&#xff0c;用递归函数的返回值…...

编程日记 2024/7/27 7:05:12

web自动化测试-python+selenium+unitest

文章目录 Web自动化测试工具1. 主流的Web自动化测试工具2. Selenium家族史 Web自动化测试环境搭建基于Python环境搭建示例&#xff1a;通过程序启动浏览器&#xff0c;并打开百度首页&#xff0c;暂停3秒&#xff0c;关闭浏览器 页面元素定位1. 如何进行元素定位&#xff1f;2.…...

编程日记 2024/7/27 7:03:10

LeetCode题练习与总结：组合两个表--175

一、题目描述 SQL Schema > Pandas Schema > 表: Person ---------------------- | 列名 | 类型 | ---------------------- | PersonId | int | | FirstName | varchar | | LastName | varchar | ---------------------- personId 是该表的主…...

编程日记 2024/7/27 7:02:09

数据结构：二叉搜索树（简单C++代码实现）

目录 前言 1. 二叉搜索树的概念 2. 二叉搜索树的实现 2.1 二叉树的结构 2.2 二叉树查找 2.3 二叉树的插入和中序遍历 2.4 二叉树的删除 3. 二叉搜索树的应用 3.1 KV模型实现 3.2 应用 4. 二叉搜索树分析 总结 前言 本文将深入探讨二叉搜索树这一重要的数据结构。二…...

编程日记 2024/7/27 6:58:05

深入理解Prompt工程

前言&#xff1a;因为大模型的流行&#xff0c;衍生出了一个小领域“Prompt工程”&#xff0c;不知道大家会不会跟小编一样&#xff0c;不就是写提示吗&#xff0c;这有什么难的&#xff0c;不过大家还是不要小瞧了Prompt工程&#xff0c;现在很多大模型把会“Prompt工程”作为…...

编程日记 2024/7/27 6:57:03

代码随想录算法训练营day6 | 242.有效的字母异位词、349. 两个数组的交集、202. 快乐数、1.两数之和

文章目录 哈希表键值 哈希函数哈希冲突拉链法线性探测法 常见的三种哈希结构集合映射C实现std::unordered_setstd::map 小结242.有效的字母异位词思路复习 349. 两个数组的交集使用数组实现哈希表的情况思路使用set实现哈希表的情况 202. 快乐数思路 1.两数之和思路 总结 今天是…...

编程日记 2024/7/27 6:52:58

vue3 vxe-table 点击行，不显示选中状态，加上设置isCurrent: true就可以设置选中行的状态。

1、上个图&#xff0c;要实现这样的&#xff1a; Vxe Table v4.6 官方文档 2、使用 row-config.isCurrent 显示高亮行&#xff0c;当前行是唯一的&#xff1b;用户操作点击选项时会触发事件 current-change <template><div><p><vxe-button click"sel…...

编程日记 2024/7/27 6:50:56

Linux没有telnet 如何测试对端的端口状态

前段时间有人问uos没有telnet&#xff0c;又找不到包。 追问了一下为什么非要安装telnet&#xff0c;答复是要测试对端的端口号。 这里简单介绍一下&#xff0c;测试端口号的方法有很多&#xff0c;telent只是在windows上经常使用&#xff0c;linux已很少安装并使用该命令&…...

编程日记 2024/7/27 6:46:52

花几千上万学习Java，真没必要！（二十九）

1、基本数据类型包装类&#xff1a; 测试代码1&#xff1a; package apitest.com; //使用Integer类的不同方法处理整数。 //将字符串转换为整数&#xff08;parseInt&#xff09;和Integer对象&#xff08;valueOf&#xff09;&#xff0c; //将整数转换回字符串&#xff08;…...

编程日记 2024/7/27 6:45:51

C#如何引用dll动态链接库文件的注释

1、dll动态库文件项目生成属性中要勾选“XML文档文件” 注意&#xff1a;XML文件的名字切勿修改。 2、添加引用时XML文件要与DLL文件在同一个目录下。 3、如果要是添加引用的时候XML不在相同目录下&#xff0c;之后又将XML文件复制到相同的目录下&#xff0c;需要删除引用&am…...

编程日记 2024/7/27 6:44:50

WordPress原创插件：自定义文章标题颜色

插件设置截图 文章编辑时&#xff0c;右边会出现一个标题颜色设置&#xff0c;可以设置为任何颜色 更新记录&#xff1a;从输入颜色css代码&#xff0c;改为颜色选择器&#xff0c;更方便&#xff01; 插件免费下载 https://download.csdn.net/download/huayula/89585192…...

编程日记 2024/7/27 6:43:49

Unity分享：继承自MonoBehaviour的脚步不要对引用类型的字段在声明时就初始化

如果某些字段在每个构造函数中都要进行初始化&#xff0c;很多人都喜欢在字段声明时就进行初始化&#xff0c;对于一个非继承自MonoBehaviour的脚步&#xff0c;这样做是没有问题的&#xff0c;然而继承自MonoBehaviour后就会造成内存的浪费&#xff0c;为什么呢&#xff1f;因…...

编程日记 2024/7/27 6:42:48

.NET Core中如何集成RabbitMQ

在.NET Core中集成RabbitMQ主要涉及到几个步骤&#xff0c;包括安装RabbitMQ的NuGet包、建立连接、定义队列、发送和接收消息等。下面是一个简单的指南来展示如何在.NET Core应用程序中集成RabbitMQ。 目录 1. 安装RabbitMQ.Client NuGet包 2. 建立连接 3. 定义队列 4. 发…...

编程日记 2024/7/27 6:39:45

嵌入式C++、STM32、MySQL、GPS、InfluxDB和MQTT协议数据可视化：智能物流管理系统设计思路流程（附代码示例）

目录 项目概述 系统设计 硬件设计 软件设计 系统架构图 代码实现 1. STM32微控制器与传感器代码 代码讲解 2. MQTT Broker设置 3. 数据接收与处理 代码讲解 4. 数据存储与分析 5. 数据分析与可视化 代码讲解 6. 数据可视化 项目总结 项目概述 随着电子商务的快…...

编程日记 2024/7/27 6:37:43

.net core docker部署教程和细节问题

在.NET Core中实现Docker一键部署&#xff0c;通常涉及以下几个步骤&#xff1a;编写Dockerfile以定义镜像构建过程、构建Docker镜像、运行Docker容器&#xff0c;以及&#xff08;可选地&#xff09;使用自动化工具如Docker Compose或CI/CD工具进行一键部署。以下是一个详细的…...

编程日记 2024/7/27 6:36:42

php数据库链接

Php超全局变量 GET 和 POST 都创建一个数组&#xff08;例如 array&#xff08; key1 > value1&#xff0c; key2 > value2&#xff0c; key3 > value3&#xff0c; ...&#xff09;&#xff09;。此数组包含键/值对&#xff0c;其中 键是表单控件的名称&#xff0c;…...

编程日记 2024/7/27 6:34:40

python+vue3+onlyoffice在线文档系统实战20240726笔记，左侧菜单实现和最近文档基本实现

解决右侧高度过高的问题 解决方案&#xff1a;去掉右侧顶部和底部。 实现左侧菜单 最近文档&#xff0c;纯粹文档 我的文档&#xff0c;既包括文件夹也包括文件 共享文档&#xff0c;别人分享给我的 基本实现代码&#xff1a; 渲染效果&#xff1a; 简单优化 设置默认菜…...

编程日记 2024/7/27 6:33:39

vue中的nexttrick

Vue.js 是一个用于构建用户界面的渐进式框架&#xff0c;它允许开发者通过声明式的数据绑定来构建网页应用。在 Vue 中&#xff0c;nextTick 是一个非常重要的 API&#xff0c;它用于延迟回调的执行&#xff0c;直到下次 DOM 更新循环之后。 为什么使用 nextTick&#xff1f; …...

编程日记 2024/7/27 6:31:37

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2026/2/4 16:06:56

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2026/1/21 18:20:51

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/12/12 4:55:21

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/2/1 6:50:07

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/12/4 0:13:33

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2026/1/31 5:30:51