浮动元素脱离文档流，position定位元素不感知浮动，需手动预留空间或用BFC隔离；clear仅对普通流元素有效，对absolute/fixed无效。 浮动元素会脱离文档流，position定位无法直接“避开”它 这是最常被误解的一点：给一个 或 的元素设置 / ，它不会自动绕开旁边浮动的盒子。浏览器根本不会去“计算浮动占据的空间”来调整定位元素的位置——因为浮动元素已脱离普通流，而绝对定位元素只参考其 最近的已定位祖先 （ 不为 ），两者在布局计算上是平行关系。 所以不是“同时用就能协同”，而是必须明确谁让位、谁占位、谁清空： 浮动元素负责横向排列（如侧边栏 + 主内容） 用在后续普通流元素上，强制它下移避开浮动区域 用在需要精确坐标控制的元素上（如右上角通知 badge、悬停下拉菜单），但它默认不感知浮动，需手动留白或包裹隔离 clear 只对普通流中的块级元素生效，对 position 元素无效 这类声明，只有在元素处于文档流中（即 或 且未脱离流）时才会触发“下移避让”。一旦设了 或 ，该元素就完全脱离流， 对它毫无作用。 常见误写： 立即学习 “ 前端免费学习笔记（深入） ”； 正确做法是：如果希望定位元素不和浮动内容重叠，要么 给它的父容器加 或 来形成 BFC，隔离浮动影响范围 手动在定位元素的 / 值里预留出浮动宽度（比如侧边栏宽 200px，主内容区 ，再把 badge 放在主内容区内定位） 避免让定位元素和浮动元素共享同一父容器的视觉空间，改用嵌套结构分离层级 float + position: relative 可用于微调，但别指望它“跟随”浮动流 不会让元素脱离文档流，所以它可以和 共存，常用于对已浮动的元素做偏移修正（比如浮动图片后加个带阴影的图注，想让它稍微右移一点）： 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 注意两点： 偏移基准是该元素在浮动后所处的“静态位置”，不是父容器左上角 这种相对位移仍受浮动影响——如果上面有其他浮动元素撑高了位置，它也会跟着上移；它不会“粘着”浮动块一起动 若想让文字环绕浮动图+图注整体，得把图和图注包进同一个浮动容器里，而不是单独给图注加 真正安全的混用方式：用 float 做基础流向，用 position + clear 控制局部锚点 典型场景：左侧导航栏浮动，右侧主内容用 避开，再在主内容内部某个区块（如文章标题旁）加一个绝对定位的标签（如“推荐”徽章）。 结构示例： CSS 关键部分： 这里的关键是： 没直接和 元素共用，而是通过 （或 ）让主内容区主动避开浮动，再把定位元素限制在已“腾出空间”的区域内。这才是可控的协作逻辑。 浮动本身越来越边缘化，现代布局应优先考虑 或 ；但如果维护老项目，记住：定位不避浮，清浮不管定，二者共存必须靠“空间预分配”或“容器隔离”。