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

Question

根据CSS规范：

  

一个浮动框向左或向右移动，直到其外边缘   接触包含块的边缘或另一个浮点的外边缘。   如果有线框，则浮动框的外部顶部对齐   与当前行框的顶部。

在编写此演示时，我发现高度为零时，浮点数总是会崩溃。但是我在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时，我们在第一个float元素上不再有边缘，因此第二个float元素将移动以接触包含块的边缘。

---

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

.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>