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

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>