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

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

news 2026/5/16 12:30:45

文章目录

  • 一、清除浮动简介
  • 二、清除浮动语法
  • 三、清除浮动 - 额外标签法
    • 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

Java动态调试利器JDBG：无侵入线上问题诊断与热修复实战

1. 项目概述&#xff1a;一个为Java开发者准备的调试利器如果你是一名Java开发者&#xff0c;肯定对调试这件事又爱又恨。爱的是&#xff0c;它能帮你精准定位那些让人抓狂的Bug&#xff1b;恨的是&#xff0c;传统的调试方式——在IDE里打断点、单步执行——在面对复杂、分布式…...

编程新知 2026/5/16 12:16:08

tchMaterial-parser：5分钟快速上手，轻松获取国家中小学智慧教育平台电子课本的完整指南

tchMaterial-parser&#xff1a;5分钟快速上手&#xff0c;轻松获取国家中小学智慧教育平台电子课本的完整指南 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具&#xff0c;帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载&#x…...

编程新知 2026/5/16 12:09:53

Android Studio中文界面解决方案：从语言障碍到开发效率提升

Android Studio中文界面解决方案&#xff1a;从语言障碍到开发效率提升 【免费下载链接】AndroidStudioChineseLanguagePack AndroidStudio中文插件(官方修改版本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/an/AndroidStudioChineseLanguagePack 当你在And…...

编程新知 2026/5/16 12:09:53

2025届最火的AI辅助论文方案横评

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 深寻作为先进的大型语言模型&#xff0c;在学术论文写作领域显现出明显的应用潜力&#xff…...

编程新知 2026/5/16 11:11:06

基于Java开发无人机飞手接单平台低空经济服务系统源码搭建

在低空经济快速崛起的当下&#xff0c;无人机已广泛应用于航拍、测绘、电力巡检、农业植保等多个领域&#xff0c;专业飞手资源与市场需求之间的对接难题日益凸显——需求方难以快速找到符合资质的飞手&#xff0c;具备合法资质的飞手也面临接单渠道分散、任务匹配低效的问题。…...

编程新知 2026/5/16 8:36:18

基于RAG的个人知识库AI助手：从原理到部署实战

1. 项目概述&#xff1a;当RAG遇上个人知识库最近几年&#xff0c;大语言模型&#xff08;LLM&#xff09;的能力边界不断被拓展&#xff0c;但一个核心痛点始终存在&#xff1a;它无法记住你私有的、非公开的、不断更新的知识。比如&#xff0c;你想让AI助手帮你分析上周的团队…...

编程新知 2026/5/16 8:23:27

眉山奶油风家具的实际使用效果如何？奶油风家具

测评主体公示本次测评将对以下品牌进行对比&#xff1a;唯品名居家居、顾家家居、芝华仕、左右沙发、全友家居。所有品牌的测评将遵循统一标准&#xff0c;包括测评维度、动作、环境和数据采集方法。测评维度与标准1. 材质质量动作&#xff1a;检查家具表面材质、内部结构 过程…...

编程新知 2026/5/16 7:31:50

山东反向旅游推荐“小众秘境古村落”

假期不想挤热门景区&#xff0c;只想寻一处安静古村放空散心&#xff1f;给大家整理山东4 个小众秘境古村落&#xff0c;全程 1-2.5 小时车程&#xff0c;适合近郊自驾、短途出游&#xff0c;原生态氛围拉满&#xff0c;人少景美超适合避峰出行。一、济南长清&#xff5c;方峪古…...

编程新知 2026/5/16 6:37:25

对比直接使用原厂 API 体验 Taotoken 在模型选型上的便捷性

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比直接使用原厂 API 体验 Taotoken 在模型选型上的便捷性 当开发者需要评估不同大模型的能力以适配具体项目时&#xff0c;通常会…...

编程新知 2026/5/16 5:38:18

基于Gemini CLI的深度研究工具：命令行AI助手的架构与实战

1. 项目概述&#xff1a;当命令行遇上深度研究如果你和我一样&#xff0c;是个常年泡在终端里的开发者或研究者&#xff0c;那么“allenhutchison/gemini-cli-deep-research”这个项目标题&#xff0c;光是扫一眼&#xff0c;就能让人心跳加速。它精准地戳中了我们这类人的两个…...

编程新知 2026/5/16 4:06:40