css - 如何将浮动元素推到另一个浮动元素下方？

Question

jsfiddle：http: //jsfiddle.net/PTSkR/195/

我试图让小蓝色潜水员始终坐在角落里，在红色下方但在大蓝色潜水员的右侧。如何做到这一点？

CSS：

.floated{
    background-color: blue;
    color: white;
    padding: 5px;
    float: left;
    display: block;
}

.big{
    height: 300px;
}
.with-padding{
    padding: 50px;
}
.yellow{
    background-color: red;
}

HTML：

<div class='floated big'>FLOATED BIG</div>
<div class='floated with-padding yellow'>SHOULD BE NEXT TO FLOATED BIG</div>
<div class='floated'>push down</div>

Answer 1

我建议您将red divand嵌套small blue div在自己的容器 div 中。

然后，将其浮动container div到big blue div.

<div class='floated big blue'>FLOATED BIG</div>
<div class="floated">
  <div class='with-padding yellow'>SHOULD BE NEXT TO FLOATED BIG</div>
  <div class='blue'>push down</div>
</div>

如果您需要将蓝色小 div 进行“收缩包装”，您可以将其浮动：

<div class='floated big blue'>FLOATED BIG</div>
<div class="floated">
  <div class='with-padding yellow'>SHOULD BE NEXT TO FLOATED BIG</div>
  <div class='floated blue'>push down</div>
</div>

http://jsfiddle.net/PTSkR/197/

Answer 2

虽然不清楚你想要什么，但我认为将 clear:left 属性添加到最后一个浮动 div 会给你想要的结果。就像是：

.floated:last-of-type{
    clear:left;
}