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

【问题标题】：Will float element's zero height edge be considered as edge?浮动元素的零高度边缘是否会被视为边缘？
【发布时间】：2019-04-24 23:45:17
【问题描述】：

根据 CSS 规范：

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

当我写这个演示时，我发现浮动总是在高度为零时崩溃。但我没有在 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>

【问题讨论】：

“边缘”是什么意思？
@Paulie_D edge 表示浮动元素的外边缘。 "一个浮动框向左或向右移动，直到它的外边缘接触到包含块边缘或另一个浮动的外边缘"
因为一个没有高度和宽度的元素......不存在出于所有意图和目的。

标签： css css-float

【解决方案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>

【讨论】：