左对齐的框不会留在父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;

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

Answer 2

你需要在最后的父div中提供<div style="clear:both"></div>。

<div class="parent">
    your code
    <div style="clear:both;"></div>
</div>

Answer 3

无论何时使用float，都需要通过将clear: both分配给其父

来清除它