Div/Section背景颜色异常求助：无变化及地图区域黑色斑点故障

问题1：同section内div背景不显示的修复 #

问题根源是float导致父元素高度塌陷：你给.kontaktUndMap设置了float: left，但父容器section.forBackground未清除浮动，导致父元素高度为0，白色背景无法显示。

修复方法：给.forBackground添加清除浮动的样式，推荐两种方案：

1. 简单快速的overflow方案：

.forBackground {
  background-color: white;
  overflow: hidden;
}

2. 更通用的伪元素方案（不影响布局兼容性）：

.forBackground {
  background-color: white;
}
.forBackground::after {
  content: "";
  display: table;
  clear: both;
}

问题2：地图周围黑斑的修复 #

黑斑是页面黑色背景透过元素间隙露出导致的，核心原因有两点：

• .kontaktUndMap的width:50%加上padding:20px，默认box-sizing:content-box会让元素总宽度超过50%，引发溢出/换行，露出黑色背景；
• iframe用了固定宽高600x450，和父容器尺寸不匹配产生间隙。

修复步骤：

1. 全局设置盒模型，让padding不占用额外宽度：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. 调整.kontaktUndMap样式，确保布局对齐：

.kontaktUndMap {
  width: 50%;
  background-color: white;
  float: left;
  padding: 20px;
  font-size: 20px;
  line-height: 32px;
  min-height: 450px; /* 强制左右区域高度一致，避免间隙 */
}

3. 让iframe自适应父容器，删除HTML中iframe的固定宽高属性：

.karte {
  width: 100%;
  height: 100%;
  min-height: 410px; /* 减去padding高度，和左侧内容区对齐 */
}

额外优化：将两个.kontaktUndMap放到同一个容器内，避免布局混乱：

<section class="forBackground">
  <div class="kontaktUndMapContainer" id="Kontakt">
    <div class="kontaktUndMap">
      <!-- 左侧联系内容 -->
    </div>
    <div class="kontaktUndMap">
      <!-- 地图iframe -->
    </div>
  </div>
</section>

调整完成后，两个div的白色背景会正常显示，地图周围的黑斑也会消失。

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