浮动导致父容器高度塌陷使box-shadow被裁剪，根本解法是创建BFC：优先用display: flow-root，次选overflow: hidden或::after清除浮动，并逐级检查上级溢出裁剪。

浮动导致父容器高度塌陷，box-shadow 被裁剪

使用 float 后，父元素往往高度变为 0，box-shadow 只能显示在那“0 高度”的窄条区域里——实际是阴影被父容器的 overflow: hidden（或默认 visible 下子元素溢出不可见）给截断了。根本原因不是阴影本身有问题，而是父容器没包裹住浮动子元素。

清除浮动的几种可靠方式及适用场景

关键是要让父容器重新“感知”浮动子元素的高度。现代项目优先用 display: flow-root；老项目兼容 IE 时再考虑其他方案。

• display: flow-root：最简洁，无副作用，支持所有现代浏览器（Chrome 64+、Firefox 57+、Safari 10.1+），直接给父容器加即可
• overflow: hidden 或 auto：见效快，但可能意外隐藏内容或触发滚动条，慎用于有下拉菜单、tooltip 等溢出需求的容器
• ::after 伪元素清除法：兼容性最好（IE8+），需写额外 CSS，注意 content: "" 不可省略，且必须设 display: table 或 block

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

为什么 BFC 是根本解法

display: flow-root 和 overflow: hidden 都会创建新的 BFC（块级格式化上下文），而 BFC 的特性之一就是：**容器会包含内部的浮动元素，计算高度时不再忽略它们**。这正是 box-shadow 能完整显示的前提——父容器有了真实高度，阴影自然落在它边界之外的区域上。

• 避免用 height 或 min-height 硬撑高：无法响应子元素变化，维护困难
• 避免只靠 clear: both 放在父容器外：不解决父容器自身高度塌陷问题
• Flex/Grid 容器天然形成 BFC：如果布局允许，直接换用 display: flex 或 grid 更彻底

检查是否还有隐藏的溢出裁剪

即使清除了浮动，如果父容器祖先元素设置了 overflow: hidden 或 clip-path，阴影仍可能被截断。逐级向上检查父级的 overflow、transform（某些情况下会创建新层叠上下文并影响渲染）、clip 相关属性。

• 临时加 outline: 1px dashed red 到各级父容器，快速定位哪个盒子在“吃掉”阴影
• 浏览器开发者工具中，勾选 “Show layout shifts” 或手动 hover 检查 computed height 和 overflow
• 阴影本身用 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 这类常见值时，若只显示上半部分，基本可断定是上方某层容器高度不足或溢出隐藏

# css  # 伪元素  # 浏览器  # 工具  # safari  # overflow  # 清除浮动  # 为什么  # red  # firefox  # chrome  # Float  # auto  # display  # transform  # flex  # table  # 的是  # 放在  # 才是  # 这类  # 在那  # 落在  # 几种  # 还得  # 只显示  # 要让 

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

相关推荐： 详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  如何快速搭建个人网站并优化SEO？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  Laravel API资源类怎么用_Laravel API Resource数据转换  node.js报错：Cannot find module 'ejs'的解决办法  如何在阿里云虚拟服务器快速搭建网站？  Laravel如何自定义错误页面（404, 500）？（代码示例）  Laravel如何处理CORS跨域请求？（配置示例）  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  网站制作大概多少钱一个,做一个平台网站大概多少钱？  Laravel如何使用Passport实现OAuth2？（完整配置步骤）  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  javascript基于原型链的继承及call和apply函数用法分析  Laravel如何保护应用免受CSRF攻击？（原理和示例）  Java Adapter 适配器模式（类适配器，对象适配器）优缺点对比  Internet Explorer官网直接进入 IE浏览器在线体验版网址  Java垃圾回收器的方法和原理总结  如何解决hover在ie6中的兼容性问题  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  Laravel怎么调用外部API_Laravel Http Client客户端使用  如何快速搭建安全的FTP站点？  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  在线制作视频的网站有哪些,电脑如何制作视频短片？  bootstrap日历插件datetimepicker使用方法  Laravel如何使用Gate和Policy进行授权？（权限控制）  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  googleplay官方入口在哪里_Google Play官方商店快速入口指南  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  西安专业网站制作公司有哪些,陕西省建行官方网站？  Laravel如何创建和注册中间件_Laravel中间件编写与应用流程  高端建站如何打造兼具美学与转化的品牌官网？  Android Socket接口实现即时通讯实例代码  Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询  北京专业网站制作设计师招聘,北京白云观官方网站？  Laravel如何理解并使用服务容器（Service Container）_Laravel依赖注入与容器绑定说明  Laravel如何处理异常和错误？（Handler示例）  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  Laravel怎么进行浏览器测试_Laravel Dusk自动化浏览器测试入门  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  Java类加载基本过程详细介绍  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  如何在建站宝盒中设置产品搜索功能？  Bootstrap整体框架之CSS12栅格系统  如何用PHP快速搭建CMS系统？  nodejs redis 发布订阅机制封装实现方法及实例代码  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  黑客如何利用漏洞与弱口令入侵网站服务器？