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

【CSS】清除浮动 ① ( 清除浮动简介 | 清除浮动语法 | 清除浮动 - 额外标签法 )

news 2026/3/31 23:50:41

文章目录

  • 一、清除浮动简介
  • 二、清除浮动语法
  • 三、清除浮动 - 额外标签法
    • 1、额外标签法 - 语法说明
    • 2、问题代码示例
    • 3、额外标签法代码示例





一、清除浮动简介


在开发页面时 , 遇到下面的情况 ,

父容器 没有设置 内容高度 样式 , 容器中的 子元素 设置了 浮动样式 , 脱离了标准流 , 高度会默认设置为 0 像素 , 这样就会导致各种显示混乱情况 ;

为了应对上述情况 , 可以 使用 " 清除浮动 " 操作 ;


清除浮动 主要作用 : 解决 父容器盒子模型 因为 子元素 被设置为 浮动元素 导致 高度默认为 0 像素 的问题 ;

清除浮动 效果 : 父容器 检测高度时 , 会考虑 浮动子元素 的高度 , 将浮动元素的高度 计算在父容器的总高度中 ;





二、清除浮动语法


清除浮动语法 :

CSS 选择器 {clear: 属性值;
}

属性值取值 :

  • left : 清除左侧浮动 ;
  • right : 清除右侧浮动 ;
  • both : 同时清除左右两侧浮动 ;

一般在使用的时候 , 只使用 clear: both; 一种样式 ;





三、清除浮动 - 额外标签法



1、额外标签法 - 语法说明


推荐使用 " 额外标签法 " , 在最后一个浮动元素的末尾 , 添加一个额外标签 , 如下 :

<div class="clear"></div>

使用 其它标签 也可以 , 如 :

<br class="clear"/>
  • 优点 : 容易理解 , 使用方便 ;
  • 缺点 : 添加的 额外标签 无意义 , 使得 HTML 结构混乱 ;

2、问题代码示例


下面的代码中 , 父容器 1 没有指定高度 , 内部设定了两个 浮动元素 , 没有指定标准流元素 , 因此默认状态下 , 其高度为 0 ;

父容器 1 的 兄弟元素 , 直接显示在了 父容器 1 的下方 , 父容器 1 只能将边框绘制出来 , 内容尺寸高度为 0 , 在两个边框下 , 就是 父容器 2 的盒子 ;


问题代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>浮动清除 - 额外标签法</title><style>/* 清除标签默认的内外边距 */* {padding: 0;     margin: 0;}/* 清除列表默认样式 ( 主要是前面的点 ) */li {list-style: none;}/* 设置总体背景 */body {background-color: #f4f4f4;}/* 插入图片自适应 */img {width: 100%;}/* 下面是正式内容 *//* 父容器 1 没有指定高度 , 默认 0 像素 */.father1 {width: 500px;background-color: pink;border: 2px solid green;}/* 子元素 1 */.son1 {float: left;width: 200px;height: 200px;background-color: blue;}/* 子元素 2 */.son2 {float: left;width: 250px;height: 250px;background-color: red;}/* 父容器 2 - 父容器 1 的兄弟元素 */.father2 {width: 700px;height: 150px;background-color: purple;}</style>
</head>
<body><div class="father1"><div class="son1"></div><div class="son2"></div></div><div class="father2"></div>
</body>
</html>

展示效果 :

在这里插入图片描述


3、额外标签法代码示例


在 父容器 1 father1 的 最后一个子元素 son2 后面 , 添加一个新的 子元素 , 为该子元素设置 clear: both; 属性样式 , 会自动将 son1 和 son2 当做标准流元素进行测量 , 此时 父容器 1 就会有高度 ;


额外标签法代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>浮动清除 - 额外标签法</title><style>/* 清除标签默认的内外边距 */* {padding: 0;     margin: 0;}/* 清除列表默认样式 ( 主要是前面的点 ) */li {list-style: none;}/* 设置总体背景 */body {background-color: #f4f4f4;}/* 插入图片自适应 */img {width: 100%;}/* 下面是正式内容 *//* 父容器 1 没有指定高度 , 默认 0 像素 */.father1 {width: 500px;background-color: pink;border: 2px solid green;}/* 子元素 1 */.son1 {float: left;width: 200px;height: 200px;background-color: blue;}/* 子元素 2 */.son2 {float: left;width: 250px;height: 250px;background-color: red;}/* 父容器 2 - 父容器 1 的兄弟元素 */.father2 {width: 700px;height: 150px;background-color: purple;}/* 清除浮动 */.son3 {clear: both;}</style>
</head>
<body><div class="father1"><div class="son1"></div><div class="son2"></div><div class="son3"></div></div><div class="father2"></div>
</body>
</html>

展示效果 :

在这里插入图片描述

相关文章：

【CSS】清除浮动 ① ( 清除浮动简介 | 清除浮动语法 | 清除浮动 - 额外标签法 )

文章目录一、清除浮动简介二、清除浮动语法三、清除浮动 - 额外标签法1、额外标签法 - 语法说明2、问题代码示例3、额外标签法代码示例一、清除浮动简介 在开发页面时 , 遇到下面的情况 , 父容器 没有设置 内容高度 样式 , 容器中的 子元素 设置了 浮动样式 , 脱离了标准流 , …...

编程日记 2023/3/28 23:25:11

Shell test 命令

文章目录Shell test 命令数值测试字符串测试文件测试Shell test 命令 Shell中的 test 命令用于检查某个条件是否成立&#xff0c;它可以进行数值、字符和文件三个方面的测试。 数值测试 参数说明-eq等于则为真-ne不等于则为真-gt大于则为真-ge大于等于则为真-lt小于则为真-le…...

编程日记 2023/3/28 23:20:10

pytorch项目实战之实时人脸属性检测系统

简介 本项目采用CelebA人脸属性数据集训练人脸属性分类模型&#xff0c;使用mediapipe进行人脸检测&#xff0c;使用onnxruntime进行模型的推理&#xff0c;最终在intel的奔腾cpu上实现30-100帧完整的实时人脸属性识别系统。 ps:本来是打算写成付费专栏的&#xff0c;毕竟这是…...

编程日记 2023/3/28 23:15:08

JS和Jquery

js函数 function 方法名&#xff08;参数&#xff09;{ 方法体 return 返回值&#xff1b; } js事件 事件介绍 事件指的就是当某些组件执行了某些操作后&#xff0c;会触发某些代码的执行 onload 某个页面或图像被完成加载 onsubmit 当表单提交时触发事件 onclick 鼠标单击事件…...

编程日记 2023/3/28 23:10:07

Linux设置固定IP

vi /etc/sysconfig/network-scripts/ifcfg-ens33 第一个修改是开启网络 修改完成后重启网络服务 sudo service network restart 然后就可以看到ip 地址了 然后我们开始修改固定IP 主要是下图中的两部分 BOOTPROTO从dhcp改为static HWADD好像改不改都行&#xff0c;我改了&…...

编程日记 2023/3/28 23:05:06

面试准备啊

fail fast 是把数组原来的更改次数记住 每次都去比较 变了 就抛异常 如果数组容量没到64 会先扩容 再树化 缺点&#xff1a;全是偶数 hash分布不均匀 质数比较好&#xff08;二次哈希也不需要&#xff09; 效率好 2的n次幂 使用内存屏障解决指令重排序 第一次扩容和之后的不…...

编程日记 2023/3/28 23:00:05

机器人工程专业师生的第二张名片

课堂上多次提及第二张名片。什么是CatGPT-使用效果如何-专业感性非理性总结如下&#xff1a;机器人工程的工作与考研之困惑→汇总篇←其中包括&#xff1a;☞ 机器人工程的工作与考研之困惑“卷”☞ 机器人工程的工作与考研之困惑“歧视”☞ 机器人工程的工作与考研之困惑“取舍…...

编程日记 2023/3/28 22:55:04

【云原生之企业级容器技术 Docker实战一】Docker 介绍

目录一、Docker 介绍1.1 容器历史1.2 Docker 是什么1.3 Docker 和虚拟机&#xff0c;物理主机1.4 Docker 的组成1.5 Namespace1.6 Control groups1.7 容器管理工具1.8 Docker 的优势1.9 Docker 的缺点1.10 容器的相关技术1.10.1 容器规范1.10.2 容器 runtime1.10.3 容器管理工具…...

编程日记 2023/3/28 22:50:03

【Microsoft】与 Bing AI 进行 ⌈狂飙⌋

&#x1f38a; 今天是3月8号&#xff0c;❤️农历二月十七&#xff0c;&#x1f495;祝广大女同胞们&#x1f469;女神节快乐&#x1f389;&#xff01;——以创作之名致敬女性开发者文章目录序言Ⅰ、Bing AI初体验Ⅱ、代码生成Ⅲ、生成图像Ⅳ、使用次数Ⅴ、总结序言 ​ 近期&…...

编程日记 2023/3/28 22:45:02

PyDolphinScheduler发布4.0.2版本，修复无法提交工作流到DolphinScheduler 3.1.4的问题

点击蓝字 关注我们PyDolphinScheduler 正式发布 4.0.2 版本&#xff0c;主要修复了 4.0.1 版本无法提交工作流到 Apache DolphinScheduler 3.1.4 的问题。除此之外&#xff0c;PyDolphinScheduler 4.0.2 较大的优化还包括&#xff1a;PyDolphinScheduler 校验 Apache DolphinSc…...

编程日记 2023/3/28 22:40:01

go-cqhttp安装使用

2023-03-28 时效性强 go-cqhttp qq机器人 qq bot 安装 本地虚拟机 centos7安装使用 浏览官方文档go-cqhttp 帮助中心 下载&#xff1a;Releases Mrs4s/go-cqhttp GitHub 当前最新版本v1.0.0-rc5 下载go-cqhttp_1.0.0-rc5_linux_amd64.rpm 传到服务器&#xff0c;新…...

编程日记 2023/3/28 22:34:59

论文阅读和分析：Hybrid Mathematical Symbol Recognition using Support Vector Machines

HMER论文系列 1、论文阅读和分析&#xff1a;When Counting Meets HMER Counting-Aware Network for HMER_KPer_Yang的博客-CSDN博客 2、论文阅读和分析&#xff1a;Syntax-Aware Network for Handwritten Mathematical Expression Recognition_KPer_Yang的博客-CSDN博客 3、论…...

编程日记 2023/3/28 22:29:58

05期：面向业务的消息服务落地实践

这里记录的是学习分享内容&#xff0c;文章维护在 Github&#xff1a;studeyang/leanrning-share。 我们在上次分享中聊到了领域驱动设计和微服务&#xff0c;在 DDD 中有一个术语叫做领域事件&#xff0c;例如订单模型中的订单已创建、商品已发货。领域事件会触发下一步的业务…...

编程日记 2023/3/28 22:24:57

代码随想录|day26|回溯算法part03● 39. 组合总和● 40.组合总和II● 131.分割回文串

今天的练习基本就是回溯法组合问题&#xff0c;这一节只要看labuladong即可。 组合问题&#xff1a; 39. 组合总和---------------------形式三&#xff0c;元素无重可复选 链接&#xff1a;代码随想录 一次对&#xff0c;同样在进入下次循环时&#xff0c;注意startindex是从j…...

编程日记 2023/3/28 22:19:55

linux-文件切割-splitcsplit

目录 按大小切割-split 按行数切割-split 按内容切割-csplit 按大小切割-split split -b 10k example.conf -d -a 3 output.file example.conf 被切割的文件 -b 指定切割大小 -d 数字后缀 -a 后缀长度&#xff0c;默认2 output.file …...

编程日记 2023/3/28 22:14:54

USB键盘实现——设备限定描述符（五）

文章目录设备限定描述符仓库地址设备限定描述符介绍设备限定描述符结构体定义获取设备限定描述符的请求标准设备请求USB 控制端点收到的数据设备限定描述符返回附 STM32 枚举日志设备限定描述符 设备限定描述符内容解析和 HID鼠标 一致。 仓库地址 仓库地址 设备限定描述符…...

编程日记 2023/3/28 22:09:53

【C++】map和set（一文拿捏，包教包会）

目录 1.关联式容器和序列式容器 2.键值对 3.树型结构的关联式容器 4.set 5.multiset 6.map 7.multimap 1.关联式容器和序列式容器 set&#xff1a;关联式容器——数据之间关联紧密 线性表&#xff08;vector&#xff0c;list&#xff0c;deque&#xff09;&#xff1a;序…...

编程日记 2023/3/28 22:04:52

爬虫Day2 正则表达式

爬虫Day2 正则表达式 一、正则表达式 1. 正则的作用 正则表达式是一种可以让复杂的字符串变得简单的工具。 写正则表达式就是用正则符号来描述字符串规则 # 案例1&#xff1a;判断一个字符串是否是一个合法的手机号码 tel 23297293329# 方法1&#xff1a;不用正则 if len…...

编程日记 2023/3/28 21:59:51

LeetCode-0324~28

leetCode1032 思路&#xff1a;想的是维护一个后缀数组&#xff0c;然后用Set去判断一下&#xff0c;结果超时了&#xff0c;去看题解&#xff0c;好家伙AC自动机&#xff0c;没办法&#xff0c;开始学。 正确题解&#xff1a; class ACNode{public ACNode[] children;publi…...

编程日记 2023/3/28 21:54:49

Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库，如何发布到npm并使用（支持全局或按需引入使用），超详细

最终效果如下 一、先创建vue2项目 1、 可以用vue-cli自己来创建&#xff1b;也可以直接使用我开源常规的vue2后台管理系统模板 以下我以 wocwin-admin-vue2 项目为例 修改目录结构&#xff0c;最终如下 2、修改vue.config.js文件 module.exports { // 修改 src 目录 为 exam…...

编程日记 2023/3/28 21:49:48

告别HEIC预览盲区：让Windows用户轻松驾驭苹果图像格式

告别HEIC预览盲区&#xff1a;让Windows用户轻松驾驭苹果图像格式 【免费下载链接】windows-heic-thumbnails Enable Windows Explorer to display thumbnails for HEIC files 项目地址: https://gitcode.com/gh_mirrors/wi/windows-heic-thumbnails 问题场景&#xff1…...

编程新知 2026/3/31 23:35:00

OneMore插件：3大核心功能让OneNote效率提升300%

OneMore插件&#xff1a;3大核心功能让OneNote效率提升300% 【免费下载链接】OneMore A OneNote add-in with simple, yet powerful and useful features 项目地址: https://gitcode.com/gh_mirrors/on/OneMore 传统笔记管理vs智能插件&#xff1a;效率差距在哪里&#…...

编程新知 2026/3/31 22:56:36

物联网水产养殖解决方案：全域监控，数据驱动科学养殖

一、方案前言水产养殖作为我国农业支柱产业之一&#xff0c;是保障民生水产品供应的核心板块&#xff0c;当前正面临从传统粗放式养殖向现代化、精准化、绿色化养殖转型的关键节点。随着养殖密度提升、环保要求趋严、市场对高品质水产品需求增长&#xff0c;以及劳动力成本攀升…...

编程新知 2026/3/31 22:48:33

Qwen2.5-14B-Instruct开源大模型实战：像素剧本圣殿8-Bit UI部署详解

Qwen2.5-14B-Instruct开源大模型实战&#xff1a;像素剧本圣殿8-Bit UI部署详解 1. 项目概览 像素剧本圣殿&#xff08;Pixel Script Temple&#xff09;是一款基于Qwen2.5-14B-Instruct大模型深度微调的专业剧本创作工具。这个独特的创作环境将强大的AI推理能力与复古8-Bit视…...

编程新知 2026/3/31 22:17:59

Llama-3.2V-11B-cot真实案例展示：OCR后图像逻辑推理生成可验证结论

Llama-3.2V-11B-cot真实案例展示&#xff1a;OCR后图像逻辑推理生成可验证结论 1. 模型能力概览 Llama-3.2V-11B-cot是一个突破性的视觉语言模型&#xff0c;它不仅能理解图像内容&#xff0c;还能进行系统性推理并生成可验证的结论。这个基于LLaVA-CoT论文实现的模型&#x…...

编程新知 2026/3/31 20:54:30

三角函数公式速查手册：从基础到进阶的实用指南

三角函数公式速查手册&#xff1a;从基础到进阶的实用指南 三角函数是数学中最基础也最重要的工具之一&#xff0c;无论是学生应对考试&#xff0c;还是开发者在图形编程、信号处理等领域的实际应用&#xff0c;都离不开这些公式的灵活运用。本文将系统整理从基础定义到高级变换…...

编程新知 2026/3/31 19:53:31

避坑指南：在虚拟化环境（KVM/VMware）中配置RDMA网卡，为什么你的QP ID总不对？

虚拟化环境中RDMA网卡QP ID配置避坑实战 当你在KVM或VMware环境中部署RDMA over Converged Ethernet (RoCE)时&#xff0c;是否遇到过这样的场景&#xff1a;虚拟机内的应用程序能够正常建立QP&#xff08;Queue Pair&#xff09;&#xff0c;但在实际数据传输时却出现无法解释…...

编程新知 2026/3/31 19:04:26

当你的STM32F0没有VTOR：用SRAM重映射实现IAP升级的完整指南（附代码）

当你的STM32F0没有VTOR&#xff1a;用SRAM重映射实现IAP升级的完整指南&#xff08;附代码&#xff09; 在嵌入式开发中&#xff0c;IAP&#xff08;In-Application Programming&#xff09;功能对于远程固件更新至关重要。然而&#xff0c;当使用Cortex-M0内核的STM32F0系列芯…...

编程新知 2026/3/31 18:54:19

如何3步搭建AI驱动的多智能体股票分析平台？TradingAgents-CN全指南

如何3步搭建AI驱动的多智能体股票分析平台&#xff1f;TradingAgents-CN全指南 【免费下载链接】TradingAgents-CN 基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版 项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN 面对复杂多变的金…...

编程新知 2026/3/31 18:32:07

3步掌握Vortex：让250+游戏模组管理像专业开发者一样简单

3步掌握Vortex&#xff1a;让250游戏模组管理像专业开发者一样简单 【免费下载链接】Vortex Vortex: Nexus-Mods开发的游戏模组管理器&#xff0c;用于简化模组的安装和管理过程。 项目地址: https://gitcode.com/gh_mirrors/vor/Vortex 价值定位&#xff1a;重新定义游…...

编程新知 2026/3/31 18:23:59