当孩子的身高不相等时，float不起作用

Question

当任何子元素大于其他元素时，

float不起作用。 这是jsfiddle。

`https://jsfiddle.net/vs8bud2w/4/`

div2的高度为120px；其他元素的高度为100px；因此第五个元素不会向左浮动，而是停留在div2附近。

如何解决此问题？ 甚至清楚两者都不起作用。

Answer 1

您可以使用此：

.three {
   clear: left;
}

意味着左侧不允许有浮动元素。

Answer 2

根据元素的层次结构，parent拥有child，该元素分为one，two和three。 每个子元素的width:25%使4个元素占据100％的宽度，因此最后一个元素（三个子元素，绿色）位于它们的下方。

但是，由于它们仍包含在父parent div中，因此它不能浮在已经存在的另一个元素之上（在height: 120px处为黄色）。

要使绿线位于左侧​​，请使所有元素的高度相等，或将绿框（子级3）放在parent div之外。

或者您也可以将clear: left属性用于第三个孩子。