有没有使用清楚：就在这里

Question

我有这个HTML代码：http://jsfiddle.net/Lgj1s5km/

<div class="clear">Div1 with float:left and clear:right</div>
<div class="float">Div2 with float:left </div>

和这个CSS：

div {
  border:1px solid #ff9900;
  width:120px;
  height: 120px;
}

.clear {

  float:left;
  clear: right;
  }

.float {
  float: right;
}

据我了解，clear: right的方式是右侧不允许浮动元素。如果它们是，＆＃34;清除＆＃34;应用于转到新行并启动新文档流。

但是，在此示例中，div.clear无法转到新行，因为它前面有一个新元素。但是，如果我颠倒了2个<div>标签的顺序，这一切都可以正常工作。

我的问题是，是否有可能让div.clear转到新的行，尽管它位于div.float前面？

Answer 1

这取决于您是否有任何其他元素可能会受到您div.clear定位的影响，但如果没有，那么您可以给div.clear 留下的印象在下一行中，只需声明margin-top等于div.float的高度加上div.float的顶部和底部边框的高度：

.clear {
float: left;
margin-top: 122px;
}