SVG变形本质是父容器高度塌陷所致，因浮动元素脱离文档流，导致包含SVG的父容器高度为0；需在直接父容器上用伪元素清除浮动，并配合flex布局、合理设置宽高及viewBox来根本解决。
SVG变形是因为父容器高度塌陷
浮动元素脱离文档流后，父容器如果没设置高度，会“看不见”子元素，导致包含的 svg 被挤压或错位——这不是SVG本身问题，而是外层布局失控。常见现象是：SVG显示不全、位置偏移、宽高异常，甚至被截断。
- 检查父容器是否只有浮动子元素（比如
float: left的div或img） - 用浏览器开发者工具选中父容器，看其 computed height 是否为 0 或远小于预期
- 确认
svg没有设position: absolute或意外的transform干扰
清除浮动必须作用于SVG的直接父容器
很多人在更外层加 clear: both 或伪元素，结果无效——关键点在于：清除浮动要作用在**包含浮动子元素且也包裹 SVG 的那个容器上**，否则 SVG 仍在塌陷空间里渲染。
- 推荐用伪元素清除：
.container::after { content: ""; display: table; clear: both; } - 避免用
overflow: hidden强制撑开（可能剪裁svg的overflow: visible内容，比如箭头末端、文字描边） - 若父容器已设
display: flex或display: grid，浮动本身就不该存在——此时应移除float，改用 Flex/Grid 布局
SVG宽高设置要配合清除后的容器行为
清除浮动只修复容器高度，但 SVG 若依赖百分比宽高（如 width: 100%），仍可能因父容器未设明确尺寸而表现异常。
- 给父容器设最小宽高：
min-width/min-height，尤其当内容为空或动态加载时 - SVG自身避免同时设
width和height+viewBox，易触发拉伸；优先用viewBox+ 单侧尺寸（如仅width: 100%） - 不要依赖
float来排版 SVG——svg是替换元素，默认 inline，用vertical-align: top或display: block配合 margin 更可控
现代方案：直接弃用 float 布局
只要不是维护老项目，别为了兼容 IE8 以下硬扛 float。SVG 经常需要精确对齐、响应式缩放，和浮动天然冲突。
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex替代浮动布局，父容器加flex-wrap: wrap，子项用flex: 1或flex-basis - SVG 外层包一层
div并设flex-shrink: 0，防止被压缩 - 注意 Safari 对
flex+svg的旧版本 bug（如 Safari 10），可加min-width: 0到 SVG 父容器
float 维持结构的环境里。很多“SVG 变形”问题，追到底都是布局模型混用导致的隐性冲突。 
