使用CSS Float属性定位SVG图片：float:left失效问题求助

嘿，我来帮你搞定这个头疼的SVG浮动问题！把PNG换成SVG后float失效，大概率是SVG作为<img>加载时，和父元素的布局交互方式和PNG有点不一样，试试下面这几个方法：

• 给包裹SVG的<a>标签添加浮动样式
  你的SVG是放在<a>标签里的，虽然给<img>加了float:left，但如果<a>还是默认的inline状态，可能会限制SVG的浮动效果。给<a>也加上浮动：

  #NavRow a {
    float: left;
    /* 可选：如果需要去掉默认的下划线 */
    text-decoration: none;
  }
  

• 强制SVG的display属性为块级
  有些浏览器对SVG作为<img>时的默认display处理和PNG不同，强制设置为block可以确保浮动生效：

  #Header_logo {
    position: relative;
    float: left;
    max-height: 100%;
    max-width: 100%;
    display: block; /* 新增这一行 */
  }
  

• 检查SVG文件的viewBox和尺寸设置
  如果SVG本身的viewBox没有正确设置，可能会导致它在容器内自动居中（比如SVG的实际内容很小，但viewBox很大）。可以打开SVG文件，确认顶部的viewBox属性是和SVG内容匹配的，比如：

  <svg viewBox="0 0 100 100" ...>
  

  这里的100 100要和SVG实际的宽高对应，避免内容在容器内居中占位。

• 给NavRow添加overflow:hidden清除浮动影响
  有时候父容器的布局会影响子元素的浮动，给#NavRow加上overflow:hidden可以确保它包裹住浮动的元素：

  #NavRow{ 
    height: 50px; 
    padding: 6px; 
    overflow: hidden; /* 新增这一行 */
  }
  

先试试前两个方法，应该就能解决问题啦！

内容的提问来源于stack exchange，提问作者Mike Dergance