CSS float : Why are my logo's not floating left before the text?

Question

这里是初学者，正在学习 HTML 和 CSS(还不是网格和 flexbox)。我正在尝试制作一个包含两个水平 block 的部分，该 block 由左侧的图像/图标和右侧的文本组成。非常简单，但我无法让图标 float 到文本的左侧。它卡在下面的线上。我究竟做错了什么？或者我应该添加什么？

* {
  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>