css - clear :right here有没有用

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做的是右边不允许 float 元素。如果是，应用“clear”的元素将转到新行并开始新的文档流。

然而，在这个例子中，div.clear 在物理上是不可能的转到新行，因为它前面有一个新元素。如果我颠倒 2 <div> 的顺序标签，但是，这一切都可以正常工作。

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

Answer 1

这取决于你是否有任何其他元素可能会受到 div.clear 定位的影响，但如果没有，那么你可以给 div.clear < em>位于下一行的印象，只需声明一个 margin-top 等于 div.float 的高度加上 div.float的上下边框:

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