浮动布局塌陷本质是父容器未兜住脱离文档流的浮动子元素致高度坍缩，解决方法有三：一是用clear属性在浮动后加空标签清除；二是给父容器加clearfix类触发BFC；三是改用flex或grid布局天然规避。

浮动布局塌陷，本质是父容器没把浮动子元素“兜住”——子元素脱离文档流后，父容器高度坍缩为0。解决核心就两条路：让父容器参与BFC（块级格式化上下文），或在浮动元素后面插入一个“清道夫”来打断浮动影响。

用 clear 属性手动清除浮动

在浮动元素的后面加一个空标签（如 ），并设置 clear: both，它会强制该元素不与任何浮动元素在同一行，从而撑开父容器高度。

• HTML 中写法示例：
• CSS 对应样式：.clearfix { clear: both; height: 0; overflow: hidden; }
• 注意：这个空 div 必须放在所有浮动子元素的 末尾，且不能被 display: none 或 visibility: hidden 隐藏

用 clearfix 类触发 BFC 清除浮动（推荐）

给父容器本身加一个 clearfix 类，不依赖额外标签，更语义、更干净。原理是通过伪元素生成内容并清除浮动，同时让父容器形成 BFC，自动包含浮动子元素。

• 标准 clearfix 写法（兼容 IE8+）：
  .clearfix::before,
  .clearfix::after {
  content: ""; display: table;
  }
  .clearfix::after { clear: both; }
• 现代写法可简化为：.clearfix { overflow: hidden; zoom: 1; }（zoom 触发 IE 低版本 hasLayout）
• 关键点：必须加在 浮动子元素的直接父容器上，不是最外层大盒子

现代替代方案：flex 或 grid 布局（规避浮动）

如果只是做横向排列（比如导航栏、卡片列表），直接用 display: flex 替代 float 更简单可靠，天然无塌陷问题。

• 父容器设 display: flex，子项自动水平排列，无需 clear
• 对齐、换行、间距都用 flex 属性控制，代码更直观，维护成本更低
• 兼容性足够好（Flexbox 支持到 IE10+，日常项目基本无障碍）

# css  # html  # 伪元素  # 解决方法  # 排列  # overflow  # 清除浮动  # grid布局  # Float  # class  # display  # flex  # table  # zoom  # 文档  # 放在  # 一是  # 三是  # 都用  # 它会  # 更低  # 不与  # 加在 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  Laravel队列任务超时怎么办_Laravel Queue Timeout设置详解  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  如何在宝塔面板中创建新站点？  1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  Laravel如何实现用户密码重置功能？（完整流程代码）  微信小程序 五星评分(包括半颗星评分)实例代码  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  如何快速上传建站程序避免常见错误？  轻松掌握MySQL函数中的last_insert_id()  今日头条AI怎样推荐抢票工具_今日头条AI抢票工具推荐算法与筛选【技巧】  EditPlus中的正则表达式实战(6)  成都网站制作公司哪家好,四川省职工服务网是做什么用？  海南网站制作公司有哪些,海口网是哪家的？  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  EditPlus中的正则表达式 实战(4)  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  javascript基于原型链的继承及call和apply函数用法分析  Laravel怎么清理缓存_Laravel optimize clear命令详解  如何正确选择百度移动适配建站域名？  三星网站视频制作教程下载,三星w23网页如何全屏？  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  Laravel Fortify是什么，和Jetstream有什么关系  laravel服务容器和依赖注入怎么理解_laravel服务容器与依赖注入解析  怎么用AI帮你为初创公司进行市场定位分析？  Laravel策略(Policy)如何控制权限_Laravel Gates与Policies实现用户授权  Laravel如何与Docker（Sail）协同开发？（环境搭建教程）  教学论文网站制作软件有哪些,写论文用什么软件 ？  Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  如何解决hover在ie6中的兼容性问题  javascript中的try catch异常捕获机制用法分析  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  如何为不同团队 ID 动态生成多个非值班状态按钮  如何在阿里云虚拟主机上快速搭建个人网站？  三星、SK海力士获美批准：可向中国出口芯片制造设备  Python文本处理实践_日志清洗解析【指导】  昵图网官网入口 昵图网素材平台官方入口  LinuxCD持续部署教程_自动发布与回滚机制  敲碗10年！Mac系列传将迎来「触控与联网」双革新  如何在 Pandas 中基于一列条件计算另一列的分组均值  微信公众帐号开发教程之图文消息全攻略  如何在万网自助建站中设置域名及备案？  在centOS 7安装mysql 5.7的详细教程  html5audio标签播放结束怎么触发事件_onended回调方法【教程】