Question

在单个DIV中浮动和清除是否存在技术上不正确的问题？例如，float:left开始一个框格式化上下文，clear:both结束一个框格式化上下文。将两者放在一个DIV中似乎可以创建一个与overflow:hidden不同的自包含BFC。

这是一个简单的例子：

.wrapper {
    width: 50%;
    float: left;
    clear: both;
}

我在除Safari之外的所有现代浏览器中测试了这个，因为我没有iPhone方便。我也在IE8到11中测试过它。在所有情况下它都很完美。此外，它在CSS Lint上正确验证。但我想知道我是否遗漏了一些东西。如果这是正确的，如果它有效，为什么这么多人使用clearfix hack？也许我错过了一些明显的东西？

Answer 1

是的，这是对的。 Floating以特殊方式将元素移出流中，并且清除将元素推送到先前浮动下方。

这不是clearfix hack的替代品，因为已清除的float仍然不在流中，因此父元素不会增长到包含它（除非它建立块格式化上下文）。有关详细信息，请参阅Floating elements within a div, floats outside of div. Why?。

＆＃13;

div {
  border: 2px solid blue;
  margin-bottom: 50px;
}
span {
  float: left;
  clear: both;
  background: yellow;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

＆＃13;

No clearfix:
<div>
  <span>Float</span>
  <span>Float</span>
  Text
</div>
With clearfix:
<div class="clearfix">
  <span>Float</span>
  <span>Float</span>
  Text
</div>

＆＃13;

使用float：left和clear：在同一个DIV中都是正确的吗？

1 个答案: