clip属性对浮动元素无效，必须先设position: absolute；其裁剪基于border-box，而overflow基于padding-box；clip已废弃，应优先使用clip-path。
clip 属性对浮动元素无效，必须先设 position: absolute
直接给浮动元素加 clip 不会起作用——这是最常见的误操作。因为 clip 只在 position: absolute 或 position: fixed 的元素上生效，而 float 和 position: relative / static 共存时，clip 被完全忽略。
如果你看到“浮动元素没被裁剪”，大概率是漏了这步定位声明。不要试图靠 overflow 或 display 补救，那是方向错误。
- 必须显式设置
position: absolute（或fixed），哪怕你原本只想用浮动排版 -
clip: rect()的四个值（top、right、bottom、left）全部以元素左上角为原点计算，不是相对于父容器或视口 - 例如
clip: rect(10px, 200px, 150px, 0)表示：顶部裁到距元素顶边 10px 处，右侧裁到距元素左边 200px 处（不是距右边！），底部裁到距顶边 150px 处，左侧不裁（0px）
浮动 + clip 混用时，父容器塌陷和裁剪区域错位会同时发生
一旦你给浮动元素加了 position: absolute 来启用 clip，它就彻底脱离文档流：既不再触发父容器高度塌陷问题，也不再参与浮动布局逻辑。换句话说，你其实已经放弃了“用浮动做布局”这个前提。
此时若还保留 float: left，它对定位后的元素毫无影响，纯属冗余；而父容器如果仍依赖浮动子元素撑高，就会继续塌陷——因为那个被 absolute 掉的元素已不算“子元素”了。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 要么放弃浮动，用
absolute+clip精确控制单个元素可视区域 - 要么放弃
clip，改用现代方案如clip-path（支持相对定位元素，且语法更直观） - 如果真要保留浮动语义，又想局部裁剪，应把裁剪逻辑移到父容器：用
overflow: hidden配合内边距/尺寸控制，而非在浮动子项上硬套clip
clip 裁剪区域基于 border-box，但 overflow 裁剪基于 padding-box
这是两个裁剪机制的根本差异，直接影响视觉结果。当你在同一个元素上同时设置 clip 和 overflow: hidden，它们裁剪的基准不同，容易造成内容被“双重截断”或意外露出边框。
-
clip的矩形区域从元素的border-box左上角开始测量（含 border） -
overflow的裁剪边界在padding-box内侧（即扣除 padding 后的区域） - 比如一个
border: 5px solid red+padding: 10px的元素，clip: rect(0, 100px, 50px, 0)会把红色边框的一部分也包含在可见区内；而overflow: hidden则优先隐藏掉 padding 内的内容，border 本身不受影响
clip 已废弃，优先用 clip-path 替代
clip 在 CSS Masking Level 1 中已被标记为 deprecated，所有现代浏览器都推荐使用 clip-path。它不需要 position: absolute，支持百分比、SVG 路径、基础几何函数，且能响应式缩放。
- 等效矩形裁剪：
clip-path: inset(10px 0 0 0)（上裁 10px，其余不裁） - 圆形裁剪：
clip-path: circle(40px at center) - 配合浮动？不行——
clip-path对浮动元素有效，但依然无法解决父容器塌陷；真正解法是换布局模型 - 兼容性注意：IE 完全不支持
clip-path，如需支持 IE，只能退回overflow: hidden+ 尺寸约束的老办法
别在新项目里写 clip，除非你正在维护一个明确要求支持 IE8 的老系统。它不是“还能用”，而是“随时可能被移除”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
