前端入门求助：图片右侧的选项未下移至底部，该如何解决？

你的问题出在浮动元素未清除，三个带float: left的手机容器脱离了正常文档流，导致下方的选项区块被挤到了图片左侧。下面给你两种简单的修复方案：

方案一：清除浮动（兼容旧浏览器） #

给包含浮动元素的.phones容器添加overflow: auto，触发BFC（块级格式化上下文），让容器包裹住所有浮动元素，后续内容就能正常换行到下方。

修改后的代码：

.phones {
  overflow: auto; /* 新增：清除浮动 */
}

.samsung {
  float: left;
  width: 25%;
  padding: 5px;
}

.iphone {
  float: left;
  width: 25%;
  padding: 5px;
}

.xiaomi {
  float: left;
  width: 25%;
  padding: 5px;
}

<section class="phones">
  <h3>Best phones you can chose in 2023</h3>
  <div class="samsung">
    <img src="https://american-pc.com/wp-content/uploads/2023/02/61imYpK33qL._SL1500_.jpg" alt="no internet connetion" width="75%">
    <figcaption>s23 ultra</figcaption>
  </div>
  <div class="iphone"> <!-- 修正类名大小写，和CSS保持一致 -->
    <img src="https://assets.shpresa.al/shop/2022/09/daac540d-cel1351-p.jpg" alt="no internet connetion" width="75%">
    <figcaption>Iphone 14 pro max</figcaption>
  </div>
  <div class="xiaomi">
    <img src="https://www.giztop.com/media/catalog/product/cache/dc206057cdd42d7e34b9d36e347785ca/p/m/pms_1670747135.2084309.png" alt="no internet connetion" width="75%">
    <figcaption>xiaomi 13 pro</figcaption>
  </div>
</section>
<section class="info">
  <label for="phoneA">Samsung</label>
  <input type="checkbox" id="phoneA" name="footer" value="phone">
  <label for="phoneB">Iphone</label>
  <input type="checkbox" id="phoneB" name="footer" value="phone">
  <label for="phoneC">xiaomi</label>
  <input type="checkbox" id="phoneC" name="footer" value="phone">
  <br>
</section>

注意：你之前HTML里的Iphone容器类名是大写I，和CSS里的.iphone（小写i）不匹配，已修正，否则样式不会生效。

方案二：使用Flex布局（推荐，更现代简洁） #

放弃float布局，用Flex实现横向排列，代码更简单，也不会出现浮动带来的问题：

修改后的代码：

.phones {
  display: flex; /* 设为Flex容器 */
  gap: 10px; /* 可选：给容器内元素添加间距 */
  flex-wrap: wrap; /* 可选：屏幕变小时自动换行 */
}

.phone-item { /* 统一类名，不用每个手机写单独的类 */
  width: 25%;
  padding: 5px;
}

<section class="phones">
  <h3>Best phones you can chose in 2023</h3>
  <div class="phone-item">
    <img src="https://american-pc.com/wp-content/uploads/2023/02/61imYpK33qL._SL1500_.jpg" alt="no internet connetion" width="75%">
    <figcaption>s23 ultra</figcaption>
  </div>
  <div class="phone-item">
    <img src="https://assets.shpresa.al/shop/2022/09/daac540d-cel1351-p.jpg" alt="no internet connetion" width="75%">
    <figcaption>Iphone 14 pro max</figcaption>
  </div>
  <div class="phone-item">
    <img src="https://www.giztop.com/media/catalog/product/cache/dc206057cdd42d7e34b9d36e347785ca/p/m/pms_1670747135.2084309.png" alt="no internet connetion" width="75%">
    <figcaption>xiaomi 13 pro</figcaption>
  </div>
</section>
<section class="info">
  <label for="phoneA">Samsung</label>
  <input type="checkbox" id="phoneA" name="footer" value="phone">
  <label for="phoneB">Iphone</label>
  <input type="checkbox" id="phoneB" name="footer" value="phone">
  <label for="phoneC">xiaomi</label>
  <input type="checkbox" id="phoneC" name="footer" value="phone">
  <br>
</section>

这种方式不用处理浮动清除，代码更简洁，也更符合现代前端布局的最佳实践，适合入门学习。

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