浮动元素的零高度边缘会被视为边缘吗？

Question

根据CSS规范：

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.

我在写这个demo的时候，发现当高度为0时，浮动总是会塌陷。但是我在 CSS 规范上没有找到任何关于此的声明。我的问题是为什么它会这样？为什么高度为零的边不被视为边？

.container{
  height:500px;
  width:800px;
  background:pink;
}

.f{
  float:left;
  width:100px;
/*   height:50px; */
}

.r{
  position:relative;
}

.a{
  position:absolute;
  top:0;
  left:0;
}

<div class='container'>
  <div class='f'>
    <div class='r'>
      <div class='a'>ITEM1</div>
   </div>
  </div>
  <div class='f'>
    <div class='r'>
      <div class='a'>ITEM2</div>
    </div>
  </div>
</div>

Answer 1

仅仅因为它的高度为 0，所以没有边，包含块的边将被考虑，逻辑上你会溢出。

添加一些动画以更好地查看效果：

.container{
  height:500px;
  width:800px;
  background:pink;
}

.f{
  float:left;
  width:100px;
  height:50px;
  background:red;
}

.r{
  position:relative;
}

.a{
  position:absolute;
  top:0;
  left:0;
}

@keyframes change {
  to {
    height:0;
  }
}

<div class='container'>
  <div class='f' style="animation:change 3s linear forwards">
    <div class='r'>
      <div class='a'>ITEM1</div>
   </div>
  </div>
  <div class='f' >
    <div class='r'>
      <div class='a'>ITEM2</div>
    </div>
  </div>
</div>

当达到 0 时，我们在第一个浮动元素上不再有边缘，因此第二个浮动元素将移动以接触包含块的边缘。

拥有边缘的唯一方法是确保至少有少量高度，即使它是边框、填充等。

.container{
  height:500px;
  width:800px;
  background:pink;
}

.f{
  float:left;
  width:100px;
  height:50px;
  background:red;
}

.r{
  position:relative;
}

.a{
  position:absolute;
  top:0;
  left:0;
}

@keyframes change {
  to {
    height:0;
  }
}

<div class='container'>
  <div class='f' style="animation:change 3s linear forwards;border-top:0.2px solid">
    <div class='r'>
      <div class='a'>ITEM1</div>
   </div>
  </div>
  <div class='f' >
    <div class='r'>
      <div class='a'>ITEM2</div>
    </div>
  </div>
</div>

浮动元素的零高度边缘会被视为边缘吗？

Will float element's zero height edge be considered as edge?

css

css-float