div border - 折叠到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>

第一个范围有position: absolute;，因此假设其容器中没有空格，第二个范围是浮动的，这对容器空间有相同的影响，除非它被清除。

以下代码不会出现同样的问题：

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

Fiddle