如何用Div定位SVG？添加样式后SVG消失问题求助

• 核心问题：给.button添加float:right后，元素脱离正常文档流，父容器.background未设置高度且未清除浮动，导致高度塌陷为0，视觉上SVG就像“消失”了；另外SVG中的<foreignobject>标签大小写错误，SVG对标签大小写敏感，小写的foreignobject不会被浏览器识别。

修复方案 #

1. 解决父容器高度塌陷

给父容器.background添加清除浮动的样式，有两种常用方式：

方式一：使用overflow属性

.background {
  background: red;
  overflow: auto; /* 让父容器包裹浮动子元素 */
}
.button-text {
  text-align: center;
}
.button{
  float: right;
  padding: 40px;
}

方式二：使用clearfix伪元素（更通用）

.background {
  background: red;
}
/* 添加清除浮动的伪元素 */
.background::after {
  content: "";
  display: table;
  clear: both;
}
.button-text {
  text-align: center;
}
.button{
  float: right;
  padding: 40px;
}

2. 修复SVG标签错误

将SVG中的<foreignobject>改为<foreignObject>（注意首字母O大写），确保浏览器能识别该元素：

<foreignObject width="260" height="39">
  <p class="button-text">SEE ALL NEWS</p>
</foreignObject>

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