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

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时，我们不再在第一个浮点元素上有一条边，所以第二个浮点元素将移动到触摸包含块的边缘。

---

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

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