html - 为什么 margin-left 不适用于 float:left 图像右侧的块元素？

Question

在下面的代码中，我有一个 div 中的图像向左浮动。由于图像 div 上的浮动，div 中的一些文本会右转。两者都是块级元素。

我知道我可以通过对图像应用边距来添加它们之间的分隔。但是为什么我不能通过对文本 div 应用左边距来添加分隔符呢？

jsfiddle：https ://jsfiddle.net/HumanJHawkins/r5p3197t/8/

body {
  margin: 5vw;
}

h1 {
  text-align: center;
  border-bottom: 1px solid black;
  margin-bottom: 4vw;
}

.container:after {
  content: "";
  display: block;
  clear: both;
}

.thingImage {
  float: left;
  width: 20%;
}

.thingImage img {
  max-width: 100%;
}

.thingDesc {
  display: block;
  width: 80%;
}

<h1>Things List</h1>

<div class="container">
  <div class="thingImage">
    <img src="https://i.postimg.cc/RZMY6kCf/bw-Dog-Sleepy.jpg" />
  </div>

  <div class="thingDesc">
    <h2>Thing 1</h2>
    <p>Thing one is the first thing.</p>
  </div>
</div>

<div class="container">
  <div class="thingImage">
    <img src="https://i.postimg.cc/wj0Ghw3r/desaturated-Monkey.jpg" />
  </div>

  <div class="thingDesc">
    <h2>Thing 2</h2>
    <p>Thing two is the second thing.</p>
  </div>
</div>

<div class="container">
  <div class="thingImage">
    <img src="https://i.postimg.cc/PrbcqXHT/desaturated-Spider.jpg" />
  </div>

  <div class="thingDesc">
    <h2>Thing 3</h2>
    <p>Thing one is the third thing.</p>
  </div>
</div>

标签： htmlcsscss-floatmargin