Будет ли край нулевой высоты элемента с плавающей точкой рассматриваться как край?

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>