CSS 中的浮点数会影响包含的 div

Question

我正在使用 Bootstrap v5.0 练习 HTML/CSS，浮点数和 div 之间的奇怪反应存在一些问题。特别是，我想实现以下目标：

我成功应用了以下代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="container">
  <div class="center-div new-page">
    <div class="row g-3 d-flex d-md-block">
      <div class="col-lg-6 col-md-12 float-end">
        <div class="third-slogan">
          <h2 class="d-none d-md-block">Perfect for Operations HR and Finance</h2>
          <h2 class="d-block d-md-none">OpenType features and Variable fonts</h2>
          <p class="sub-slogan">Most calendars are designed for teams. Slate is designed for freelancers who want a simple way to plan<br>their schedule.</p>
        </div>
      </div>
      <div class="col-lg-6 col-md-12 float-start">
        <div class="screen3"><img src="https://via.placeholder.com/300x100" alt="Screen 3"></div>
      </div>
      <div class="col-lg-6 col-md-12 center-div float-end">
        <div class="buttons-page-3">
          <button id="button-button" class="btn btn-rounded btn-couple-2" style="color: #FFFFFF; background-color: #03D6F3; margin-top: 0;">
                                Button
                            </button>
        </div>
      </div>
    </div>
  </div>
</div>

我的自定义 CSS：

.new-page {
    margin-top: 10%;
}

.center-div {
    text-align: center;
}

.third-slogan {
    margin-top: 18%;
    padding-right: 10%;
    padding-left: 10%;
}

.third-slogan h2, p {
    text-align: left;
}

.sub-slogan {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #5C5C5C;
    margin-top: 10%;
}

.screen3 img {
    width: 85%;
}

.buttons-page-3 {
    text-align: left;
    padding-left: 10%;
}

.btn-rounded {
    border-radius: 39px;
    font-size: 16px;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 46px;
    padding-right: 46px;
}

.btn-couple-2 {
    margin-top: 5%;
    box-shadow: 0px 4px 31px rgba(0, 0, 0, 0.15);
    margin-right: 3%
}

但问题是，在我为文本和按钮应用 2 个浮动结束，为图像应用 1 个浮动开始后，包含它们的 div 无法正确显示：

之后继续使用 div 给我带来了很多麻烦。谁能解释一下为什么会发生这种情况以及如何解决？非常感谢。

P/s：如果我删除图像或按钮的浮动，div 会恢复正常，但它不会按我的意愿显示，按钮被推到图像下方。

Answer 1

按钮周围的 div 是 .row 元素中的第三个 div 是多余的，会搞砸。此布局应该有 2 列 (col-*)，并且按钮应该在第二列内。标题、介绍文本和按钮应该是没有任何浮动的块元素，因此它们会像您的设计模型一样堆叠在一起。

我已经删除了多余的 html 标记并清理了 CSS，以便让 Bootstrap 为您完成大部分工作：https://jsfiddle.net/3johtdxk/3/

编辑：OP 希望对移动设备具有响应性，其中包含文本和图像上方的标题，以及下方的按钮。在标记中添加了第二个按钮，以便我们可以根据视口宽度隐藏/显示它们。

.new-page {
    margin-top: 10%;
}

.sub-slogan {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #5C5C5C;
    margin-top: 1.4rem;
}

.full-width {
  display: block;
  width: 100%;
}

.btn-rounded {
    border-radius: 39px;
    font-size: 16px;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 46px;
    padding-right: 46px;
}

.btn-couple-2 {
    margin-top: 5%;
    box-shadow: 0px 4px 31px rgba(0, 0, 0, 0.15);
    margin-right: 3%
}

@media (max-width: 768px) {
  .stack-order-mobile {
    flex-direction: column-reverse;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="container">
  <div class="new-page">
    <div class="row g-3 stack-order-mobile">
      <div class="col-lg-6 col-md-12">
        <img class="full-width" src="https://via.placeholder.com/1000x600" alt="Screen 3">
 <button id="mobile-button" class="btn btn-rounded btn-couple-2 d-block d-md-none d-lg-none d-xl-none mt-2" style="color: #FFFFFF; background-color: #03D6F3;">
           Button
</button>
      </div>
      <div class="col-lg-6 col-md-12">
          <h2>Perfect for Operations HR and Finance</h2>
          <p class="sub-slogan">Most calendars are designed for teams. Slate is designed for freelancers who want a simple way to plan<br>their schedule.</p>
                  
 <button id="desktop-button" class="btn btn-rounded btn-couple-2 d-none d-md-block d-lg-block d-xl-block" style="color: #FFFFFF; background-color: #03D6F3; margin-top: 0;">
           Button
</button>
      </div>
    </div>
  </div>
</div>

请注意，当我删除浮动时，我必须切换列的顺序，以便您的图像仍然保持在左侧。为了获得您想要的堆叠顺序，我添加了一个额外的按钮，其中包含 768 像素的引导程序中的隐藏/显示类和一个用于视口

媒体查询可能可以使用 Bootstrap 实用程序完成，但我不太了解。您必须将整个浏览器窗口缩小到小于 768 像素才能看到堆叠结果，因为 stackoverflow 和 jsfiddle 编辑器的响应能力都不是很好。

添加了一个 100% 宽度的较大图像，使其完全填满左侧列。您可能需要引入一些正确的填充/边距或使用百分比缩小图像。

您在其中添加了一个多余的 flex 类。 Bootstrap 列从一开始就是 flex 容器，所以我删除了它。

记住：始终使用尽可能少的 CSS！ Bootstrap 也是如此。在你知道发生了什么之前，不要用很多东西加载它。一点一点地尝试并保持你的标记精简。在大多数情况下，不需要像 img 这样的元素周围有额外的 div。

花车问题是另一个问题，这里不需要任何花车。既然我们有 flex 是一种更清洁的解决方案，那么响应性的浮动就很糟糕。我把它们都删了。如果/当您尝试在左列的元素上下文中浮动 Invision、Marvel 等 div 时，您可能需要它们。

但您似乎打算在此处使用图像，因此不需要浮动。尝试只使用引导列（更少的代码，更少的混乱）。