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

CSS基础：浮动（float）如何使用清楚以及代替方法

news 2026/3/27 12:29:28

浮动元素在 CSS 中主要通过 float 属性来控制，影响元素的排列方式。浮动用于创建流式布局，常用于实现图文混排、布局列等效果。以下是浮动元素的相关属性和使用方法：

1. 基本浮动属性

  • float: 控制元素的浮动方向，可以设置为 left、right 或 none（默认值）。

  • .float-left {float: left; /* 元素向左浮动 */
}.float-right {float: right; /* 元素向右浮动 */
}.no-float {float: none; /* 元素不浮动 */
}

2. 清除浮动

浮动元素会从文档流中脱离，可能导致其后的元素布局问题。为了确保这些问题得到解决，可以使用 clear 属性：

  • clear: 用于清除浮动，确保元素在浮动元素的下方开始显示。

  • .clear-both {clear: both; /* 清除左右浮动，确保元素在浮动元素下方 */
}.clear-left {clear: left; /* 清除左浮动，确保元素在左浮动元素下方 */
}.clear-right {clear: right; /* 清除右浮动，确保元素在右浮动元素下方 */
}

3. 浮动布局示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.container {width: 100%;}.float-left {float: left;width: 30%;background-color: lightblue;margin-right: 5%;}.float-right {float: right;width: 30%;background-color: lightcoral;}.clearfix::after {content: "";display: table;clear: both;}</style><title>Float Example</title>
</head>
<body><div class="container clearfix"><div class="float-left">Left Float</div><div class="float-right">Right Float</div></div>
</body>
</html>

4. 清除浮动的常见方法

使用伪元素清除浮动是最常见的方法之一，通过在包含浮动元素的容器后添加一个伪元素来确保容器的高度被正确计算：

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

这种方法确保了浮动元素不影响容器的整体布局，常用于包含浮动子元素的容器。

5. 替代方法：Flexbox 和 Grid

现代 CSS 布局技术（如 Flexbox 和 Grid）提供了更强大和灵活的布局控制，通常可以替代浮动布局来实现更复杂的设计。

  • Flexbox:

  • .container {display: flex;justify-content: space-between;
}.item {width: 30%;
}

  • Grid:

  • .container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;
}.item {background-color: lightblue;
}

使用这些现代布局技术可以减少浮动带来的布局问题，并提供更强大的布局选项。

相关文章：

CSS基础：浮动（float）如何使用清楚以及代替方法

浮动元素在 CSS 中主要通过 float 属性来控制&#xff0c;影响元素的排列方式。浮动用于创建流式布局&#xff0c;常用于实现图文混排、布局列等效果。以下是浮动元素的相关属性和使用方法&#xff1a; 1. 基本浮动属性 float: 控制元素的浮动方向&#xff0c;可以设置为 left…...

编程日记 2024/9/13 4:19:58

margin重叠该怎么解决？

在CSS中&#xff0c;当两个或多个垂直相邻的块级元素&#xff08;如<div>&#xff09;的margin相遇时&#xff0c;它们不会叠加成两个margin的和&#xff0c;而是会取两个margin中的较大值&#xff0c;这种现象被称为“margin重叠”&#xff08;margin collapsing&#x…...

编程日记 2024/9/13 4:17:56

Linux学习笔记(黑马程序员，前四章节)

第一章 快照 虚拟机快照&#xff1a; 通俗来说&#xff0c;在学习阶段我们无法避免的可能损坏Linux操作系统&#xff0c;如果损坏的话&#xff0c;重新安装一个Linux操作系统就会十分麻烦。VMware虚拟机支持为虚拟机制作快照。通过快照将当前虚拟机的状态保存下来&#xff0c;…...

编程日记 2024/9/13 4:11:50

tekton pipeline resources

PipelineResource 代表着一系列的资源&#xff0c;主要承担作为 Task 的输入或者输出的作用。它有以下几种类型&#xff1a; git&#xff1a;代表一个 git 仓库&#xff0c;包含了需要被构建的源代码。将 git 资源作为 Task 的 Input&#xff0c;会自动 clone 此 git 仓库。pu…...

编程日记 2024/9/13 4:07:46

使用Python实现多个PDF文件的合并

使用Python可以很方便地实现多个PDF文件的合并。我们可以使用PyPDF2库来完成这个任务。以下是一个实现PDF合并的Python脚本&#xff1a; import os from PyPDF2 import PdfMergerdef merge_pdfs(input_dir, output_filename):# 创建一个PdfMerger对象merger PdfMerger()# 获取…...

编程日记 2024/9/13 4:05:45

微擎忘记后台登录用户名和密码怎么办？解决方法

微擎忘记后台登录名和登录密码是很常见的&#xff0c;服务器百科网fwqbk.com告诉你找回后台登录用户名和密码的方法&#xff1a; 一&#xff1a;找回微擎后台用户名 &#xff08;如果只是忘记了后台登录密码&#xff0c;请忽略此步骤&#xff0c;跳转到第二步&#xff09; 通…...

编程日记 2024/9/13 4:03:42

blender我的对称模型好像中点被我不小心移动了 我现在如果雕刻 两边修改的地方不是对称的 我该怎么办

blender我的对称模型好像中点被我不小心移动了 我现在如果雕刻 两边修改的地方不是对称的 我该怎么办 首先请调整好模型确保左右前后对其相应的xyz轴 之后CtrlA应用变换 确保这些都归0且模型和xyz轴对应 如果在Blender中模型的中点&#xff08;对称轴&#xff09;不小心被移动了…...

编程日记 2024/9/13 4:01:40

数据库——MySQL概述

一、数据库 存储数据的仓库&#xff0c;数据是有组织的存储&#xff0c;简称database&#xff08;DB&#xff09; 二、数据库管理系统 操控和管理数据库的大型软件&#xff08;DBMS&#xff09; 三、SQL 操作关系型数据库的编程语言&#xff0c;定义了一套操作关系型数据库…...

编程日记 2024/9/13 4:00:40

云服务器部署DB-GPT项目

本文收录于《DB-GPT项目》专栏&#xff0c;专栏总目录&#xff1a; 点击这里。 文章目录 项目介绍 一、登录云服务器 1. 进入控制台 2.点击容器实例&#xff08;点数字&#xff09; 二、创建容器实例 1. 等待容器实例创建好&#xff0c;创建好的容器实例如下&#xff1a;…...

编程日记 2024/9/13 3:58:38

基于锂电池的多路直流电源模块设计

本实物模块从实物外观、接口介绍及功能说明三部分来介绍这款基于锂电池的多路直流电源模块。 1、实物外观 2、接口介绍 本模块的3D外观图如下图所示&#xff0c;整体尺寸为6*8cm。H1为单节锂电池接口&#xff0c;H2为5V输出接口&#xff0c;H3为12V输出接口&#xff0c;H4为-…...

编程日记 2024/9/13 3:56:35

蓝奏云网盘搜索网页版PHP源码

蓝搜WEB网页版V1.0是一款全开源的搜索引擎程序&#xff0c;支持添加搜索违禁词&#xff0c;并且提供了代码注释&#xff0c;方便用户阅读和修改。该程序支持自适应PC端和移动端&#xff0c;并采用了简洁的界面设计&#xff0c;没有后台管理的繁琐操作&#xff0c;使用起来十分方…...

编程日记 2024/9/13 3:54:33

CocosCreator面试真题详解

最近有位同学面试Cocos Creator&#xff0c;我们把面试时问道的真题列举出来&#xff0c;并配上参考答案。 问题1: 你们公司项目时如何做战斗系统的? 面试官你好&#xff0c;做战斗系统和架构的时候&#xff0c;我们一般把代码逻辑分成3层来设计&#xff0c;同时把数据独立出…...

编程日记 2024/9/13 3:53:32

线性代数 第七讲 二次型_标准型_规范型_坐标变换_合同_正定二次型详细讲解_重难点题型总结

文章目录 1.二次型1.1 二次型、标准型、规范型、正负惯性指数、二次型的秩1.2 坐标变换1.3 合同1.4 正交变换化为标准型 2.二次型的主要定理3.正定二次型与正定矩阵4.重难点题型总结4.1 配方法将二次型化为标准型4.2 正交变换法将二次型化为标准型4.3 规范型确定取值范围问题4.…...

编程日记 2024/9/13 3:52:31

国内外网络安全政策动态（2024年8月）

▶︎ 1.《关于进一步加强智能网联汽车准入、召回及软件在线升级管理的通知》公开征求意见 8月1日&#xff0c;工业和信息化部装备工业一司联合市场监管总局质量发展局组织编制了《关于进一步加强智能网联汽车准入、召回及软件在线升级管理的通知&#xff08;征求意见稿&#…...

编程日记 2024/9/13 3:51:30

重心映射：坐标系统与边界处理策略

重心映射 在许多应用中&#xff0c;特别是在计算机图形学中&#xff0c;现在通常使用三角形网格形式的分段线性曲面工作&#xff0c;在本课程笔记的剩余部分&#xff0c;我们将主要坚持使用这种类型的曲面。 3.1 三角形网格 如前一章所述&#xff0c;让我们用 $ p (x,y,z) $ …...

编程日记 2024/9/13 3:50:29

python-网页自动化（二）

获取元素属性 1. 获取属性 以百度首页的logo为例&#xff0c;获取logo相关属性 <img hidefocus"true" id"s_lg_img" class"index-logo-src" src"//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width"270…...

编程日记 2024/9/13 3:47:25

QT实战 商城客户端开发

需要qt先配置mysql cmake编译 一共2个文件 第一个导入数据库&#xff0c;mysql数据库密码在main.cpp里修改成你自己的&#xff0c;然后打开导入即可 第二个是客户端&#xff0c;mysql数据库密码在BasicWindow.cpp里修改成你自己的...

编程日记 2024/9/13 3:43:20

使用Java增删改查数据库

文章目录 前言一、PrepareStatement类是什么&#xff1f;二、实操展示 1.增2.删3.改4.查总结 前言 既然连接数据库都可以通过java语言实现&#xff0c;那么通过java语言对数据库进行增删改查的操作自然是顺理成章的事情了。 一、PrepareStatement类是什么&#xff1f; PrepareS…...

编程日记 2024/9/13 3:41:18

NAND发货量增长放缓，2024 Q2营收增长14%

根据市场研究机构TrendForce Corp.于2024年9月9日发布的报告&#xff0c;2024年第二季度NAND闪存发货量增长放缓&#xff0c;但营收增长了14%&#xff0c;主要受人工智能&#xff08;AI&#xff09;固态硬盘&#xff08;SSD&#xff09;需求的推动。 NAND闪存市场概况 2024年…...

编程日记 2024/9/13 3:37:14

2024年9月13日 十二生肖 今日运势

小运播报&#xff1a;2024年9月13日&#xff0c;星期五&#xff0c;农历八月十一 &#xff08;甲辰年癸酉月庚辰日&#xff09;&#xff0c;法定工作日。 红榜生肖&#xff1a;猴、鼠、鸡 需要注意&#xff1a;牛、兔、狗 喜神方位&#xff1a;西北方 财神方位&#xff1a;…...

编程日记 2024/9/13 3:35:12

4步实现Obsidian插件全中文显示：从技术原理到实践指南

4步实现Obsidian插件全中文显示&#xff1a;从技术原理到实践指南 【免费下载链接】obsidian-i18n 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-i18n Obsidian作为一款强大的知识管理工具&#xff0c;其生态系统依赖于丰富的第三方插件扩展功能。然而&#…...

编程新知 2026/3/27 12:02:21

Ubuntu16.04下MINIGUI 3.2.0环境搭建避坑指南：从依赖安装到HelloWorld运行

Ubuntu 16.04下MINIGUI 3.2.0环境搭建全流程与深度优化指南 为什么选择MINIGUI与Ubuntu 16.04的组合 MINIGUI作为国内自主研发的轻量级GUI系统&#xff0c;在嵌入式领域已有二十余年的技术沉淀。3.2.0版本在保持轻量级特性的同时&#xff0c;增强了对现代嵌入式设备的支持。而U…...

编程新知 2026/3/27 11:48:09

开源动作捕捉与3D数据采集：FreeMoCap如何颠覆传统动捕方案

开源动作捕捉与3D数据采集&#xff1a;FreeMoCap如何颠覆传统动捕方案 【免费下载链接】freemocap Free Motion Capture for Everyone &#x1f480;✨ 项目地址: https://gitcode.com/GitHub_Trending/fr/freemocap 在游戏开发、动画制作和运动科学研究领域&#xff0c…...

编程新知 2026/3/27 11:03:53

vLLM-v0.17.1保姆级教程：SSH中查看vLLM实时请求队列与Pending统计

vLLM-v0.17.1保姆级教程&#xff1a;SSH中查看vLLM实时请求队列与Pending统计 1. vLLM框架简介 vLLM是一个专注于大语言模型(LLM)推理和服务的高性能库&#xff0c;它的设计目标是让开发者能够轻松部署和管理大规模语言模型。这个项目最初由加州大学伯克利分校的天空计算实验…...

编程新知 2026/3/27 10:55:51

QMK Toolbox：机械键盘固件定制与刷写全攻略

QMK Toolbox&#xff1a;机械键盘固件定制与刷写全攻略 【免费下载链接】qmk_toolbox A Toolbox companion for QMK Firmware 项目地址: https://gitcode.com/gh_mirrors/qm/qmk_toolbox 一、核心价值&#xff1a;重新定义键盘控制自由 QMK Toolbox 作为开源硬件领域的…...

编程新知 2026/3/27 10:53:51

别再只会while(1)了！聊聊MCU裸机开发的6种实用架构，从51到STM32都能用

从超级循环到事件驱动&#xff1a;MCU裸机开发的6种架构实战指南 当你第一次点亮LED时&#xff0c;while(1)循环就像魔法一样简单有效。但随着项目复杂度增加——需要同时处理按键消抖、屏幕刷新、数据通信和状态管理时&#xff0c;那个曾经可靠的超级循环突然变成了意大利面条…...

编程新知 2026/3/27 10:35:46

从Go协程到Java 21虚拟线程：一个Gopher的迁移避坑指南与性能对比

从Go协程到Java 21虚拟线程&#xff1a;一个Gopher的迁移避坑指南与性能对比 作为一名长期深耕Go语言生态的开发者&#xff0c;第一次接触Java 21的虚拟线程时&#xff0c;那种熟悉又陌生的感觉令人印象深刻。Go的goroutine以其轻量和高效著称&#xff0c;而Java平台线程的笨重…...

编程新知 2026/3/27 10:31:45

160+实用功能：OneMore插件如何让OneNote笔记管理效率翻倍？[特殊字符]

160实用功能&#xff1a;OneMore插件如何让OneNote笔记管理效率翻倍&#xff1f;&#x1f680; 【免费下载链接】OneMore A OneNote add-in with simple, yet powerful and useful features 项目地址: https://gitcode.com/gh_mirrors/on/OneMore 还在为OneNote单调的功…...

编程新知 2026/3/27 10:19:34

A-59F 多功能语音处理模组：覆盖全场景人群，让每一次语音都清晰无噪

在门禁对讲、会议扩音、车载通话、导游喊话、监护设备、智能工牌等各类语音设备中&#xff0c;啸叫刺耳、环境嘈杂、回音不断、拾音模糊、通话断续是所有人共同的痛点。一款真正解决问题的核心硬件 ——A-59F 多功能语音处理模组&#xff0c;它集成扩音防啸叫、AI ENC 降噪、AE…...

编程新知 2026/3/27 8:28:32

【FreeRTOS实战入门】一、从CubeMX到第一个任务：手把手搭建FreeRTOS工程

1. 为什么选择FreeRTOS与CubeMX组合 第一次接触嵌入式实时操作系统时&#xff0c;很多人会纠结选择哪种RTOS。我当年在uC/OS-II和FreeRTOS之间犹豫了很久&#xff0c;最终选择了后者。原因很简单&#xff1a;FreeRTOS不仅完全免费开源&#xff0c;还有STM32CubeMX这个神器加持。…...

编程新知 2026/3/27 8:22:31