html - div 边框 - 折叠到 0 高度

Question

请查看这个 JSFiddle:http://jsfiddle.net/dNJxd/1/

如您所见，位于 .left_field > div 和 .right_field > div 的 div 上有边框。但是，该边框正在“折叠”到 0 高度。

如果我将 overflow 更改为 hidden(所有类似的问题都提倡这样做)，它可以解决问题，但这不是一个选项，因为它切断了我正在使用的日期控件。

有什么建议吗？

Answer 1

在下面的片段中:

<div>
    <span class="field_label">PO Number:</span>
    <span class="field_data">12345</span>
</div>

第一个 span 有 position: absolute;，因此假定其容器中没有空间，第二个是 float 的，这对容器空间有同样的影响，除非它被清除。

下面的代码不会有同样的问题:

<div>
    <span class="field_label">PO Number:</span>
    <span class="field_data">12345</span>
    <div style="clear: both;"></div>
</div>

Fiddle