html - 如何在容器内 float 元素

Question

我正在尝试将 #container 放在屏幕中央，并在 #container 中制作“图表”float:left >.

但是使用下面的代码，“图表”位于 #container 下。谁能告诉我如何更改代码？并告诉我为什么代码在 #container 之外制作“图表”。

#container {
  margin: auto;
  width: 10%;
  border: 3px solid #73AD21;
  padding: 10px;
}
#id1,
#id2,
#id3,
#id4 {
  float: left;
  font-size: 30px;
}

<div id="container">
  <div id="id1">
    <p>chart1</p>
  </div>
  <div id="id2">
    <p>chart2</p>
  </div>
  <div id="id3">
    <p>chart3</p>
  </div>
  <div id="id4">
    <p>chart4</p>
  </div>
</div>

Answer 1

当您向元素添加 float 时，您将脱离文档的自然流动。

您需要向 float 项的包装器添加某种 clearfix。

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

#container{
    margin: auto;
    width: 10%;
    border: 3px solid #73AD21;
    padding: 10px;
}
#id1,
#id2,
#id3,
#id4 {
    float:left;
    font-size: 30px;    
}

<div id="container" class="clearfix">
  <div id="id1"><p>chart1</p></div>
  <div id="id2"><p>chart2</p></div>
  <div id="id3"><p>chart3</p></div>
  <div id="id4"><p>chart4</p></div>
</div>

更新

如果宽度是固定的，为什么要 float div？