Html 当元素浮动且为块元素时，左边距不起作用

我有一个图像（

img

tag）和一个div，其

display

属性设置为

flex

div

和

img

排成一行。它们是浮动的。
我想将

marginleft

应用于div，但它不起作用，除非我将

div

的display属性设置为

内联块

我研究过StackoverFlow，离我的案子最近的帖子是这个。但这篇文章并没有让我明白发生了什么。 如下图所示，左侧div的边距与图像重叠。为什么？为什么它不把div推到右边

这是我的代码：
html

JSFIDLE中的相同代码：

如果我将

交通信息

类的

显示

更改为

内联块

，整个问题就解决了。但我想了解

display

与此问题的关系？发生什么事？

---

提前感谢。

您需要设置浮动元素的边距：

#chart {
  margin-right: 40px;
}

---

我已经添加了这个剩余值：100px；而不是现有的一个是保证金左：40px；并为div元素添加了一个红色边框。请参见下面的工作原理。div元素似乎更向右推进。这可能会给你一个提示吗？在哪里@AlanMI知道我可以在图像上设置边距，它会工作的。我的问题是，如果我在图像旁边的

div

元素上设置边距，为什么它不起作用。

#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;
}

#chart {
  margin-right: 40px;
}