当元素处于浮动状态并且是块元素时，左边距不起作用

Question

我有一个图像（img标签）和一个div，其display属性设置为flex。div和img放在一行中。他们漂浮了。我想将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/

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

Answer 1

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

#chart {
  margin-right: 40px;
}