svg父容器高度塌陷导致变形，必须在svg直接父容器上清除浮动；首选display: flow-root，次选伪元素clearfix；禁用overflow: hidden，避免裁剪svg内容。

SVG父容器高度塌陷导致变形

浮动元素脱离文档流，如果SVG的直接父容器只包含浮动子元素（比如float: left的图片或div），容器computed height会变成0——SVG就挤在一条线上，显示不全、错位、被截断。这不是SVG bug，是布局失控。

必须在SVG的**直接父容器**上清除浮动，不是更外层。常见错误是清在

或

上，SVG仍在塌陷空间里渲染。

• 推荐用display: flow-root：简洁无副作用，Chrome 64+/Firefox 61+/Safari 15.4+ 全支持
• 备选伪元素法：.container::after { content: ""; display: table; clear: both; }
• 禁用overflow: hidden：它虽能触发BFC，但会裁剪overflow: visible的SVG内容（如箭头末端、文字描边）

SVG在浮动环境里对齐偏移

SVG默认是inline元素，按字体baseline对齐，和文字天然错位；vertical-align在浮动上下文中无效，align-items也起不了作用。

别给<svg></svg>直接设display: block——会换行破坏行内布局；也别依赖float排SVG，它和矢量图形的精确缩放天然是冲突的。

• 给<svg></svg>加display: inline-block
• 确保父容器有明确高度参照，比如min-height: 24px
• 混排文字时，让文字容器的line-height和SVG尺寸一致（如都设为24px）
• 真正省心的做法：把浮动布局换成display: flex，SVG包一层<div>并设<code>flex-shrink: 0

  SVG被压缩或拉伸的根源

  常见现象是图标变扁、变长、比例失真——大概率不是CSS写错了，而是viewBox缺失或值不对，或者width/height属性和CSS混用。

  

  使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

  如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

  下载

  flex-shrink: 0必须加在SVG的**父容器wrapper**上，不是<svg></svg>自身。SVG是替换元素，flex属性不直接作用于它。

  • 删掉<svg></svg>标签上的width和height属性（哪怕写100%）
  • 必须显式声明viewBox，如viewBox="0 0 24 24"，数值要和原始设计稿画布严格一致
  • 需要等比缩放：用width: 100% + height: auto + preserveAspectRatio="xMidYMid meet"
  • 移动端Safari（iOS 15.4之前）可能忽略max-width: 100%，给wrapper加min-width: 0强制参与flex计算

  现代项目里该不该保留float布局

  浮动没死，但适用场景极窄：仅限文字环绕图片、多行不等高卡片列表基线对齐等少数情况。其他所有布局——两栏、导航、响应式栅格——都该用display: flex或grid替代。

  继续硬扛float，等于主动引入隐性冲突：SVG变形、对齐失效、响应式断裂，最后全是补丁套补丁。

  • Flex方案只需两行：display: flex + flex-wrap: wrap，子项用flex: 1或flex-basis
  • Safari 10 对flex + svg有旧bug，可加min-width: 0到SVG父容器兜底
  • IE11需同时写display: -ms-flexbox和-ms-flex-align: center，且gap不可用，改用margin-inline-end

  真正难的不是写清除代码，是判断SVG是否本就不该落在浮动环境里——很多“适配问题”，追到底都是布局模型混用埋的雷。