Question

任何想法为什么负边距不适用于应用了clearfix的容器？

.cf:after {
  content:"";
  display:block;
  clear:both;
}
.col {
  float: left;
  width: 50%;
  margin-bottom: 50px;
}
.wrapper {
  margin-bottom: -50px;
}
.wrapper-alt {
  margin-bottom: -50px;
  overflow: hidden;
}

<div class="wrapper cf">
  <div class="col">column 1</div>
  <div class="col">column 2</div>
  <div class="col">column 3</div>
  <div class="col">column 4</div>
</div>
<p>Something at bottom</p>
<hr />
<div class="wrapper-alt">
  <div class="col">column 1</div>
  <div class="col">column 2</div>
  <div class="col">column 3</div>
  <div class="col">column 4</div>
</div>
<p>Something at bottom</p>

在第一个示例中，-50px的负边距没有影响。在第二个例子中，使用overflow：hidden它可以正常工作。

我知道我可以使用overflow：hidden但我想知道为什么clearfix的底部边距不起作用。是否可以在不使用其他包装元素的情况下使其工作？

Answer 1

如果你添加一个边框，那就更清楚了：

＆＃13;

p {
  border: 1px solid;
}
.cf:after {
  content:"";
  display:block;
  clear:both;
}
.col {
  float: left;
  width: 50%;
  margin-bottom: 50px;
}
.wrapper {
  margin-bottom: -50px;
}
.wrapper-alt {
  margin-bottom: -50px;
  overflow: hidden;
}

＆＃13;

<div class="wrapper cf">
  <div class="col">column 1</div>
  <div class="col">column 2</div>
  <div class="col">column 3</div>
  <div class="col">column 4</div>
</div>
<p>Something at bottom</p>
<hr />
<div class="wrapper-alt">
  <div class="col">column 1</div>
  <div class="col">column 2</div>
  <div class="col">column 3</div>
  <div class="col">column 4</div>
</div>
<p>Something at bottom</p>

＆＃13;

由于负边距，该段确实上升了，但段落内的文字并没有。

那是因为文字不能与float的边距框重叠：

浮动旁边创建的当前和后续行框根据需要缩短，以便为浮子的边缘盒腾出空间。

如果使用overflow: hidden，则建立新的块格式化上下文。浮动只在它们参与的块格式化上下文中有效果，因此段落不受影响。

还有其他方法可以建立新的块格式化上下文，请参阅Floating elements within a div, floats outside of div. Why?

Answer 2

在第一个示例中，p元素框确实受到包装器上的负边距的影响，但由于浮动的.col元素被清除，因此其中的文本被按下正好在它之前的clearfix。

此clearfix还可以防止collapsing包装器与p元素的负边距 - 如果删除它，整个包装器会随着p向上移动，看起来似乎两个元素之间的单个负边距导致两个元素都被移位。

overflow: hidden导致包装器建立block formatting context，它隔离了浮点数而不需要clearfix hack。这允许p元素受到包装器上的负边距的影响，而浮动不会妨碍。

如果没有包装器，你真的无法做到这一点。没有一个，你可以给出负余量的唯一其他元素是p本身的负上边距，当你这样做时，它只会崩溃，其边缘是其自身的上边距发生的任何一个边缘与它相邻（浮子从流动中取出，因此它们永远不会中断边缘崩溃）。

最好的办法是坚持使用overflow: hidden的包装。无论如何，你的浮动不太可能溢出你的包装，它是迄今为止防止浮动干扰你的其他布局的最干净的方法（即使它与clearfix一样多。）

如果这一切听起来很复杂，那就是因为它。一起使用浮动和负边距意味着你将进入一个受伤的世界。抛出一个clearfix黑客，事情变得更加混乱。

Micro clearfix底部边距不起作用

2 个答案: