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

CSS3学习教程，从入门到精通，CSS3 浮动与清除浮动语法知识点及案例代码（14）

article 2026/2/23 9:05:37

CSS3 浮动与清除浮动语法知识点及案例代码

一、浮动基础

浮动语法

选择器 {float: left|right|none|initial|inherit;
}

left：元素向左浮动。
right：元素向右浮动。
none：默认值，元素不浮动。
initial：使用默认值。
inherit：继承父元素的浮动属性。

浮动特点

浮动元素会脱离文档流。
浮动元素会尽可能地向左或向右移动，直到遇到包含框的边缘或其他浮动元素。
块级元素浮动后可以设置宽度和高度。
浮动元素后的文本会环绕在浮动元素周围。

二、清除浮动

清除浮动语法

选择器 {clear: none|left|right|both|initial|inherit;
}

none：默认值，允许两侧有浮动元素。
left：不允许左侧有浮动元素。
right：不允许右侧有浮动元素。
both：不允许两侧有浮动元素。
initial：使用默认值。
inherit：继承父元素的清除属性。

清除浮动方法

使用 clear 属性
```
.clear {clear: both;
}
```
使用 overflow 属性
```
.parent {overflow: hidden;
}
```

使用 clearfix 技巧

.clearfix::after {content: "";display: table;clear: both;
}

三、案例代码

案例一：简单的浮动布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动布局</title><style>.container {width: 600px;margin: 0 auto;border: 1px solid #ccc;}.left {float: left;width: 200px;height: 200px;background-color: #f99;}.right {float: right;width: 200px;height: 200px;background-color: #9f9;}.content {margin: 0 210px;height: 200px;background-color: #99f;}.clear {clear: both;}</style>
</head>
<body><div class="container"><div class="left">左侧浮动</div><div class="right">右侧浮动</div><div class="content">中间内容</div><div class="clear"></div></div>
</body>
</html>

注释：

.container：设置容器宽度和边框。
.left：向左浮动，设置宽度、高度和背景色。
.right：向右浮动，设置宽度、高度和背景色。
.content：设置中间内容的宽度、高度和背景色。
.clear：清除浮动。

案例二：清除浮动的多种方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动</title><style>.parent {border: 1px solid #ccc;margin-bottom: 20px;}.child {float: left;width: 100px;height: 100px;background-color: #f99;}/* 方法一：使用 clear 属性 */.clear {clear: both;height: 0;font-size: 0;line-height: 0;}/* 方法二：使用 overflow 属性 */.parent.overflow {overflow: hidden;}/* 方法三：使用 clearfix 技巧 */.clearfix::after {content: "";display: table;clear: both;}</style>
</head>
<body><h2>方法一：使用 clear 属性</h2><div class="parent"><div class="child"></div><div class="clear"></div></div><h2>方法二：使用 overflow 属性</h2><div class="parent overflow"><div class="child"></div></div><h2>方法三：使用 clearfix 技巧</h2><div class="parent clearfix"><div class="child"></div></div>
</body>
</html>

注释：

.parent：设置父容器的边框和底部外边距。
.child：向左浮动，设置宽度、高度和背景色。
.clear：使用 clear 属性清除浮动。
.parent.overflow：使用 overflow 属性清除浮动。
.clearfix::after：使用 clearfix 技巧清除浮动。

以下是开发中常用的实际具体案例，帮助你更好地理解和应用 CSS3 浮动与清除浮动：

案例三：导航栏布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>导航栏布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.nav {width: 100%;height: 60px;background-color: #333;}.logo {float: left;width: 200px;height: 60px;background-color: #444;line-height: 60px;text-align: center;color: white;}.menu {float: left;}.menu-item {float: left;width: 100px;height: 60px;line-height: 60px;text-align: center;color: white;list-style: none;}.user {float: right;width: 150px;height: 60px;line-height: 60px;text-align: center;color: white;}.clearfix::after {content: "";display: table;clear: both;}</style>
</head>
<body><div class="nav clearfix"><div class="logo">LOGO</div><ul class="menu"><li class="menu-item">首页</li><li class="menu-item">产品</li><li class="menu-item">服务</li><li class="menu-item">关于我们</li></ul><div class="user">登录/注册</div></div>
</body>
</html>

注释：

*：重置所有元素的外边距和内边距，并设置盒模型为 border-box。
.nav：设置导航栏的宽度、高度和背景色。
.logo：向左浮动，设置宽度、高度、背景色、行高和文本对齐方式。
.menu：向左浮动，包含菜单项。
.menu-item：向左浮动，设置宽度、高度、行高、文本对齐方式、颜色和列表样式。
.user：向右浮动，设置宽度、高度、行高、文本对齐方式和颜色。
.clearfix::after：使用 clearfix 技巧清除浮动，确保导航栏的高度正常。

案例四：产品列表展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>产品列表展示</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 1000px;margin: 0 auto;}.product-list {overflow: hidden; /* 清除浮动 */}.product-item {float: left;width: 230px;height: 300px;margin: 10px;background-color: #f9f9f9;border: 1px solid #ddd;border-radius: 5px;padding: 10px;}.product-img {width: 100%;height: 200px;background-color: #eee;margin-bottom: 10px;}.product-name {font-size: 16px;margin-bottom: 5px;}.product-price {color: #ff6000;font-weight: bold;}</style>
</head>
<body><div class="container"><div class="product-list"><div class="product-item"><div class="product-img"></div><div class="product-name">产品名称1</div><div class="product-price">¥199</div></div><div class="product-item"><div class="product-img"></div><div class="product-name">产品名称2</div><div class="product-price">¥299</div></div><div class="product-item"><div class="product-img"></div><div class="product-name">产品名称3</div><div class="product-price">¥399</div></div><div class="product-item"><div class="product-img"></div><div class="product-name">产品名称4</div><div class="product-price">¥499</div></div></div></div>
</body>
</html>

注释：

.container：设置容器的宽度和居中。
.product-list：设置产品列表的清除浮动方式为 overflow: hidden。
.product-item：向左浮动，设置宽度、高度、外边距、背景色、边框、圆角和内边距。
.product-img：设置产品图片的宽度、高度、背景色和外边距。
.product-name：设置产品名称的字体大小和外边距。
.product-price：设置产品价格的颜色和字体粗细。

案例五：文字环绕图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字环绕图片</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 800px;margin: 0 auto;padding: 20px;}.image-wrapper {float: left;width: 200px;margin-right: 20px;}.image {width: 100%;height: 150px;background-color: #eee;}.text {font-size: 14px;line-height: 1.6;}</style>
</head>
<body><div class="container"><div class="image-wrapper"><div class="image"></div></div><div class="text"><p>这里是环绕图片的文字内容，图片向左浮动，文字环绕在图片右侧显示。通过浮动实现文字环绕图片的效果，使页面布局更加美观和灵活。</p><p>浮动的图片脱离了文档流，但文字会自动环绕在图片周围，形成自然的排版效果。在实际开发中，这种布局常用于文章、新闻等内容的展示，提升用户体验。</p></div></div>
</body>
</html>

注释：

.container：设置容器的宽度、居中和内边距。
.image-wrapper：向左浮动，设置宽度和右侧外边距。
.image：设置图片的宽度、高度和背景色。
.text：设置文字的字体大小和行高。

案例六：表单布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 600px;margin: 0 auto;padding: 20px;}.form-group {margin-bottom: 20px;}.label {float: left;width: 100px;text-align: right;margin-right: 10px;line-height: 30px;}.input-wrapper {margin-left: 110px;}.input {width: 100%;height: 30px;padding: 0 5px;border: 1px solid #ddd;border-radius: 3px;}.clearfix::after {content: "";display: table;clear: both;}</style>
</head>
<body><div class="container"><div class="form-group clearfix"><label class="label">用户名：</label><div class="input-wrapper"><input type="text" class="input"></div></div><div class="form-group clearfix"><label class="label">密码：</label><div class="input-wrapper"><input type="password" class="input"></div></div><div class="form-group clearfix"><label class="label">邮箱：</label><div class="input-wrapper"><input type="email" class="input"></div></div></div>
</body>
</html>

注释：

.container：设置容器的宽度、居中和内边距。
.form-group：设置表单组的底部外边距。
.label：向左浮动，设置宽度、文本对齐方式、右侧外边距和行高。
.input-wrapper：设置输入框容器的左侧外边距，使输入框与标签对齐。
.input：设置输入框的宽度、高度、内边距、边框和圆角。
.clearfix::after：使用 clearfix 技巧清除浮动，确保表单组的高度正常。

通过以上案例，你可以看到 CSS3 浮动与清除浮动在实际开发中的广泛应用，从简单的布局到复杂的效果实现，它们都发挥着重要的作用。

CSS3学习教程，从入门到精通，CSS3 浮动与清除浮动语法知识点及案例代码（14）

CSS3 浮动与清除浮动语法知识点及案例代码一、浮动基础浮动语法选择器 {float: left|right|none|initial|inherit; }left：元素向左浮动。right：元素向右浮动。none：默认值，元素不浮动。initial：使用默认值。inhe…...

编程日记 2025/4/3 0:40:40

贪心算法——思路与例题

贪心算法：当我们分析一个问题时，我们往往先以最优的方式来解决问题，所以顾名思义为贪心。例题1 题目分析：这题利用贪心算法来分析，最优解（可容纳人数最多时）一定是先考虑六人桌，然…...

编程日记 2026/2/22 19:08:17

网络华为HCIA+HCIP 防火墙

防火墙部署模式路由模式有路由器的功能路由器干的活他都得干透明模式旁挂模式 IDS 端口镜像 VPN...

编程日记 2026/2/15 17:14:28

WordPress超级菜单插件UberMenu v3.78汉化版

一、插件介绍 UberMenu 是一款功能强大的 WordPress 超级菜单插件，能够帮助站长创建响应式、可自定义的多级菜单。该插件支持动态内容加载、图标、图片、搜索框等丰富功能，并且兼容大多数 WordPress 主题。 UberMenu v3.78 经过完整汉化，适用于中文站点用户，让操作更加直观…...

编程日记 2026/2/16 2:11:35

SQL中体会多对多

我们可以根据学生与课程多对多关系的数据库模型，给出实际的表数据以及对应的查询结果示例，会用到JOINLEFT JOIN两种连接 1. 学生表（students） student_idstudent_name1张三2李四3王五 2. 课程表（courses&#xff09…...

编程日记 2026/2/23 3:49:29

23种设计模式-备忘录(Memento)设计模式

备忘录设计模式 🚩什么是备忘录设计模式？🚩备忘录设计模式的特点🚩备忘录设计模式的结构🚩备忘录设计模式的优缺点🚩备忘录设计模式的Java实现🚩代码总结🚩总结 🚩什么是…...

编程日记 2026/2/17 22:32:26

2024年3月全国计算机等级考试真题（二级C语言）

😀 第1题下列叙述中正确的是 A. 矩阵是非线性结构 B. 数组是长度固定的线性表 C. 对线性表只能作插入与删除运算 D. 线性表中各元素的数据类型可以不同题目解析： A. 矩阵是非线性结构错误。矩阵通常是二维数组，属…...

编程日记 2026/2/23 2:13:12

计算机网络基础之三种交换技术及其性能分析

一. 交换技术基础 1. 三种交换技术电路交换：用于电话网络报文交换：用于电报网络分组交换：用于现代计算机网络 2. 人类历史上的通信网络 #mermaid-svg-AeGvrkUbCkicFOIo {font-family:"trebuchet ms",verdana,arial,sans-serif;…...

编程日记 2026/2/23 4:03:28

使用python爬取网络资源

整体思路网络资源爬取通常分为以下几个步骤： 发送 HTTP 请求：使用requests库向目标网站发送请求，获取网页的 HTML 内容。解析 HTML 内容：使用BeautifulSoup库解析 HTML 内容，从中提取所需的数据。处理数据&#xff…...

编程日记 2026/2/10 20:07:34

【MySQL】索引事务

目录一、索引概念作用使用场景使用查看索引创建索引删除索引背后的数据结构二、事务为什么使用事务事务的概念使用开启事务执行多条 SQL 语句回滚或提交：rollback/commit; 事务的基本特性原子性一致性持久性隔离性脏读 …...

编程日记 2026/2/13 2:54:52

平台与架构：深度解析与开发实践

平台与架构：深度解析与开发实践 1. 什么是平台与架构？ 平台（Platform）：指操作系统或运行环境，例如 linux、windows、darwin（macOS）、android 等。架构（Architecture&…...

编程日记 2026/2/23 3:16:50

【Springboot+JPA】存储过程Procedure使用及踩坑记录

SpringbootJPA存储过程调用存储过程实现1.表结构2.上报数据分页查询2.1先查出总条数2.1.1 创建存储过程2.1.2 实体类声明存储过程2.1.3 仓库方法绑定存储过程2.1.4 服务调用存储过程 2.2返回分页数据2.2.1 创建存储过程2.2.2 实体类声明存储过程2.2.3 仓库方法绑定存储过程2.2…...

编程日记 2026/2/15 11:14:20

＜template＞标签的作用，在构建可复用 UI 片段时如何应用？

大白话标签的作用，在构建可复用 UI 片段时如何应用 <template>标签的作用在前端开发里，<template>标签可是个超棒的工具。它就像是一个“代码仓库”，可以把一些 HTML 代码片段存起来，而且这些代码片段在页面刚加载…...

编程日记 2026/2/17 3:27:03

Android Compose框架的值动画（animateTo、animateDpAsState）（二十二）

深入剖析 Android 框架的值动画（animateTo、animateDpAsState） 一、引言在构建富有交互性和吸引力的 Android 应用界面时，动画起着至关重要的作用。值动画作为 Android 动画体系中的重要组成部分，能够为各种 UI 元素的属性变化…...

编程日记 2026/2/23 7:47:40

Gunicorn+Eventlet无法收到SocketIO发送的消息

GunicornEventlet无法收到Socketio发送的消息介绍问题分析**1. 确保正确安装依赖库****2. 检查 Gunicorn 启动命令****3. 配置 Flask-SocketIO 的异步模式****4. 检查库版本兼容性****5. 确认 emit 的调用方式****6. 客户端连接检查** 如何使用多个workers?**1. 为什么不能直…...

编程日记 2026/2/17 13:13:30

【江协科技STM32】软件SPI读写W25Q64芯片（学习笔记）

SPI通信协议及S为5Q64简介：【STM32】SPI通信协议&W25Q64Flash存储器芯片（学习笔记）-CSDN博客 STM32与W25Q64模块接线： SPI初始化： 片选SS、始终SCK、MOSI都是主机输出引脚，输出引脚配置为推挽输出&…...

编程日记 2026/2/15 17:55:20

基于 Vue 3 的PDF和Excel导出

以下是基于 Vue 3 Composition API 的完整实现，包括 PDF 和 Excel 导出。一、PDF 导出 (Vue 3) 安装依赖在项目中安装相关库： npm install html2canvas jspdf Vue 3 代码实现 <template><div><div ref"pdfContent" cla…...

编程日记 2026/2/20 3:41:14

Git+Fork 入门介绍

git 分区理解 fork安装从路径下去拿软件时，注意先拉到本地。经验来看，fork直接安装会出不可思议的问题。 fork操作安装，注意设置好名字，如果之前安装的同学，名字没有写好，重新安装设置好名字。 clone操…...

编程日记 2026/2/15 3:07:11

Windows系统安装Node.js和npm教程【成功】

0.引言——Node.js和npm介绍项目描述Node.js基于Chrome V8引擎的JavaScript运行环境，使JavaScript可用于服务器端开发。采用单线程、非阻塞I/O及事件驱动架构，适用于构建Web服务器、实时应用和命令行工具等npmNode.js的包管理器与大型软件注册表。拥有…...

编程日记 2026/2/22 19:43:38

Axure RP9.0 教程：左侧菜单列表导航 ( 点击父级菜单，子菜单自动收缩或展开)【响应式的菜单导航】

文章目录引言I 实现步骤添加商品管理菜单组推拉效果引言应用场景：PC端管理后台页面，左侧菜单列表导航。思路：用到了动态面板的两个交互效果来实现：隐藏/显示切换、展开/收起元件向下I 实现步骤添加商品管理菜单组在左侧画布区域添加一个菜单栏矩形框；再添加一个商…...

编程日记 2026/2/21 14:53:16

科技赋能｜ZGIS综合管网智能管理平台守护地下城市生命线

地下管网作为城市公共安全的重要组成部分，担负着城市的信息传递、能源输送、排涝减灾等重要任务，是维系城市正常运行、满足群众生产生活需要的重要基础设施，是城市各功能区有机连接和运转的维系，因此，也被称为城市“生…...

编程日记 2026/2/23 3:54:53

react中useRef和useMemo和useCallback

memo ： 被memo包裹的组件，会浅层比较 props,不会深度比较，如果浅层比较相同，就不会重新渲染组件默认是，无论怎么，都会重新渲染一遍子组件，， useMemo： 包裹一个函数&am…...

编程日记 2026/2/20 5:26:42

如何保证LabVIEW软件开发的质量？

LabVIEW作为图形化编程工具，广泛应用于工业测控、自动化测试等领域。其开发模式灵活，但若缺乏规范，易导致代码可读性差、维护困难、性能低下等问题。保证LabVIEW开发质量需从代码规范、模块化设计、测试验证、版本管理、文档完善等多维度入手…...

编程日记 2026/2/16 17:07:47

如何快速解决 Postman 报错？

介绍一些 Postman 常见的报错与处理方法，希望能够对大家有所帮助。 Postman 一直转圈打不开的问题 Postman 报错处理指南：常见报错与解决方法...

编程日记 2026/2/16 21:51:58

基于数据挖掘从经验方和医案探析岭南名医治疗妇科疾病的诊疗和用药规律

标题:基于数据挖掘从经验方和医案探析岭南名医治疗妇科疾病的诊疗和用药规律内容:1.摘要背景：岭南地区独特的地理环境、气候条件及人文风俗使该地区妇科疾病具有一定特点，岭南名医在长期临床实践中积累了丰富的治疗经验。目的：基于数据挖掘…...

编程日记 2026/2/14 12:21:06

Android Launcher3 HotSeat文件夹创建禁止方案全解析

一、技术背景与实现原理在Android 13 Launcher3定制开发中，需屏蔽HotSeat区域的文件夹创建功能。该功能涉及的核心事件处理流程如下： 复制 [拖拽事件] -> [Workspace.onDrop()] -> [CellLayout.performReorder()]└─> [createUserFolderIf…...

编程日记 2026/2/5 19:25:56

springboot body 转对象强验证属性多余属性抛错误

在Spring Boot中，当使用RequestBody注解来接收HTTP请求中的JSON数据并将其转换为Java对象时，Spring默认会忽略额外的属性。这意味着如果发送的JSON包含一些目标对象中没有定义的属性，Spring不会报错，这些额外的属性会被简单地忽略…...

编程日记 2025/9/5 18:53:11

1. 共享指针 #include <atomic> #include <iostream>template <typename T> class sharedptr { private:T *ptr;std::atomic<size_t> *count;public:sharedptr(T *p) : ptr(p), count(new std::atomic<size_t>(1)) {}sharedptr(const sharedptr…...

编程日记 2025/8/24 12:52:54

Flask（三）路由与视图函数

在 Flask 中，路由 (Route) 是将 URL 地址映射到特定的视图函数 (View Function) 的机制。视图函数处理用户请求，并返回 HTTP 响应。理解路由和视图函数是构建 Flask 应用的基础。 3.1 路由的基本概念 Flask 使用 app.route() 装饰器来定义路由。以下是…...

编程日记 2025/7/27 11:42:28

c++中cpp文件从编译到执行的过程

C 文件从编写到执行的过程可以分为几个主要阶段：编写代码、预处理、编译、汇编、链接和运行。以下是每个阶段的详细说明： 1. 编写代码这是整个过程的起点。程序员使用文本编辑器（如 VSCode、Sublime Text 或其他 IDE）编写 C 源…...

编程日记 2026/1/1 21:57:28