html - 左对齐框不会留在父 div 中

Question

我有一些要向左浮动的框，这样它们就会并排对齐。但我有一个问题。如果我设置 float: left; 我得到这个: left aligned

他们跳出父div(灰色div)。如果我设置 float: none; 我得到这个:float: none

盒子留在 div 中，div 与它们一起延伸，但它们一个在另一个下面，这是我不喜欢的。我如何在 div 中实现左对齐框？
盒子的 CSS:

.parent {
  float: left;
  width: 200px;
  background-color: white;
  border: 1px solid rgb(230,230,230);
  margin: 10px;
}

Answer 1

您必须使用溢出 css 规则。在灰色框中添加以下 css 属性:

overflow:hidden;

应用此属性后，您将获得灰色框内的元素，它们不会落在灰色框外。