html - 当元素 float 并且是 block 元素时，左边距不起作用

Question

我有一个图像(img 标签)和一个 div，其 display 属性设置为 flex。
div 和 img 排成一行。它们是 float 的。
我想将 margin-left 应用于 div 但它不起作用，除非我将 div 的显示属性设置为 inline-block .
我探索了 StackoverFlow，最近的帖子是这个 one .但是那个帖子并没有让我明白发生了什么。 如下图所示，左侧 div 的边距与图像重叠。为什么？为什么它不把 div 推到右边？:

这是我的代码:
html

<div id="traffic">
  <p>Traffic</p>
  <img  id="chart" src="https://www.syncfusion.com/products/flutter/control/images/chart/chart-types/flutter-multiple-axis-charts.png" alt="" srcset="">
  <div id="traffic-infos"></div>
</div>        

CSS

#traffic {
  background-color: rgb(255, 255, 255);
  padding: 15px 15px 15px 15px;
  overflow: auto;  /* so the container resized its height */
}

#traffic-infos {
  display: flex;
  flex-direction: column;
  margin-left: 40px;
  height: 300px;
  background-color: black;

}
#chart{
  width: 100%;
  max-width: 850px;
  min-width: 600px;
  height: auto;
  float: left;
}

JsFiddle 中的相同代码:https://jsfiddle.net/shahryarslg/xmo5uahv/8/

如果我将 traffic-infos 类的 display 更改为 inline-block，整个问题就解决了。但是我想了解 display 与这个问题有什么关系？这是怎么回事？ 提前致谢。

Answer 1

您需要在 float 元素上设置外边距:

#chart {
  margin-right: 40px;
}