CSS 浮动：为什么我的徽标没有在文本之前浮动？

Question

这里是初学者，学习 HTML 和 CSS（还没有网格和 flexbox）。我正在尝试制作一个包含两个水平块的部分，其中包括左侧的图像/图标和右侧的文本。非常简单，但我无法让图标浮动到文本的左侧。它卡在下面的行上。我究竟做错了什么？或者我应该添加什么？

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

.container {
  margin: auto;
  max-width: 1100px;
  overflow: auto;
  padding: 50px;
}

#strengths {
  height: 600px;
  margin: auto;
  Display: block;
  background-image: url('./img/mountain-lake.jpg');
  background-size: cover;
}

#strengths .primary {
  background-color: #ccc7f2;
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
  opacity: 0.75;
  line-height: 1.4em;
}

#strengths .primary i {
  float: left;
  margin-right: 20px;
  display: inline;
}

<section id="strengths" class="py-3">
  <div class="container">
    <h2 class="main-heading">My Strengths</h2>
    <div class="primary">
      <h3 class="sub-heading">Strategic Thinking</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
        qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
      <i class="fas fa-chess-pawn fa-3x"></i>
    </div>
    <br><br>
    <div class="primary">
      <h3 class="sub-heading">Analysis</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
        qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
      <i class="far fa-play-circle fa-3x"></i>
    </div>
  </div>
</section>

Answer 1

使用float 是个坏主意。我建议你尽快查看flexbox。

但如果你真的要使用它，你应该稍微改变一下HTML。

这样想。您希望图标成为“列”，而标题与文本一起成为另一列。

实现这一点的最佳方法是将文本和标题包装在 HTML 元素中（很可能是 div）

然后您应该指定在其父级.primary 中使用的width。因此，例如图标有 5%，标题和文本有 95% - 20px，即图标的边距。

还将float:left 添加到primary div。因为将 float:left 添加到元素（图标和文本）会使该元素脱离文档的正常流程。 （类似于 position:fixed/absolute ）因此，为了让它们保持为 primary div 的“一部分”，您还需要在该 div 上添加 float:left。

见下文

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

 .container {
   margin: auto;
   max-width: 1100px;
   overflow: auto;
   padding: 50px;
 }

 #strengths {
   height: 600px;
   margin: auto;
   Display: block;
   background-image: url('./img/mountain-lake.jpg');
   background-size: cover;
 }

 #strengths .primary {
   background-color: #ccc7f2;
   padding: 20px;
   margin: 20px;
   border-radius: 10px;
   opacity: 0.75;
   line-height: 1.4em;
   float:left;
   width:100%;
 }

 #strengths .primary i {
   float: left;
   margin-right: 20px;
   display: inline;
   width:5%;
 }
  #strengths .primary .wrapper {
    float:right;
    width: calc(95% - 20px);
    }

<section id="strengths" class="py-3">
  <div class="container">
    <h2 class="main-heading">My Strengths</h2>
    <div class="primary">
      <div class="wrapper">
        <h3 class="sub-heading">Strategic Thinking</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
      </div>
      <i class="fas fa-chess-pawn fa-3x">icon</i>
    </div>
    <br><br>
    <div class="primary">
      <div class="wrapper">
        <h3 class="sub-heading">Analysis</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
        </div>
      <i class="far fa-play-circle fa-3x">icon</i>
    </div>
  </div>
</section>