如何实现图片右对齐？解决float:right连带section偏移问题

问题示意图：左侧是未设置浮动的效果，右侧是添加float: right;后section元素偏移的效果，目标图片因尺寸较大原本就处于靠右位置（其余区域为透明）

问题根源是浮动元素会脱离正常文档流，导致其父容器（section#second）高度塌陷，视觉上看起来像是被带动偏移。以下是几种可行的解决方法：

方法1：给父容器添加溢出隐藏样式 #

让父容器能够包裹住浮动的子元素，避免高度塌陷：

#second {
  background-color: black;
  overflow: hidden; /* 新增样式 */
}

.orange {
  height: 10px;
  background-color: #F54703;
}

#secondBild {
  float: right;
}

方法2：用伪元素清除浮动 #

如果担心overflow: hidden会截断容器内的溢出内容，可通过伪元素清除浮动：

#second {
  background-color: black;
}

/* 新增清除浮动的伪元素 */
#second::after {
  content: "";
  display: block;
  clear: both;
}

.orange {
  height: 10px;
  background-color: #F54703;
}

#secondBild {
  float: right;
}

方法3：改用Flex布局替代浮动 #

现代布局更推荐使用Flex实现对齐，彻底避免浮动带来的文档流问题：

#second {
  background-color: black;
  display: flex;
  justify-content: flex-end; /* 让子元素靠右对齐 */
}

.orange {
  height: 10px;
  background-color: #F54703;
}

#secondBild {
  /* 移除float: right; */
}

额外修正：HTML语法错误 #

你的HTML存在标签不闭合和多余标签的问题，修正后代码如下：

<div>
  <section id="first">
    <img src="bilder/Oben_rechtsunten.png">
  </section>
  <section class="orange"></section>
  <section id="second">
    <img src="bilder/Seite_unten.png" id="secondBild">
  </section>
  <section class="orange"></section>
</div>

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