div border - Collapsing to 0 height

问题

Please check out this JSFiddle: http://jsfiddle.net/dNJxd/1/

As you can see in there, the divs at .left_field > div and .right_field > div have a border on them. However, that border is "collapsing" to 0 height.

If I change the overflow to hidden (all the similar questions are advocating for that), it fixes the issue, but that's not an option because it cuts off the date control that I'm using.

Any suggestions?

回答1:

In the following segment:

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

The first span has position: absolute; and as such assumes no space in its container, and the second is floating, which has that same effect on container space, unless it is cleared.

The following code will not have the same issue:

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

Fiddle

来源：https://stackoverflow.com/questions/10584744/div-border-collapsing-to-0-height