浮点冲突与浮点内的绝对位置

Question

有一个带溢出的'容器'：auto，包含浮动元素组，'value'。在'value'里面，有一个绝对定位元素，'popup'被溢出切断。如何使“弹出窗口”显示并仍然让“容器”不会丢失其布局？

HTML

<div class="container">
  <div class="group">
    <span class="label">Label</span>
    <span class="value">
      <span class="popup_container">
        <div class="popup">Popup</div>
      </span>
    </span>
  </div>
  <div class="group">
    <span class="label">Label</span>
    <span class="value">
      <span class="popup_container">
        <div class="popup">Popup</div>
      </span>
    </span>
  </div>
</div>

CSS

.container {
    overflow: auto;
    background-color: red;
}
.label {
    float: left;
    clear: left;
    width: 100px;
}
.value {
    float: left;
}
.popup_container {
    position: relative;
}
.popup {
    position: absolute;
    height: 200px;
    width: 200px;
    background-color: orange;
}

请参阅http://jsfiddle.net/KA7AB/2/

由于

Answer 1

将popup_container设置为absolute：

position: absolute;

http://jsfiddle.net/KA7AB/6/