html - 是否可以在绝对定位的父元素中 float 子元素？

Question

我有一些简单的标记，我在其中创建了一个占据整个屏幕的叠加层(使用 position: absolute)，然后我想在其中使用 float 创建一些列。

HTML

<div class="overlay">
  <div class="position-modal">
  </div>
  <div class="modal">
    <h3>Enter email</h3>
    <form action="">
      <input type="text">
      <input type="submit" name="" id="" value="submit" />
    </form>
  </div>
  <div class="position-modal">
  </div>
</div>

CSS

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,0,0.75);
}

.modal, .position-modal {
    box-sizing: border-box;
    float: left;
    width: 33.3%;
}

我想实现的是:

+--------------+-------------+-------------+
|              |             |             |
| This column  |             | This column |
| only exists  | Enter email | only exists |
| to           | +----+ ++   | to          |
| centralize   | +----+ ++   | centralize  |
| main col     |             | main col    |
|              |             |             |
|              |             |             |
|              |             |             |
|              |             |             |
|              |             |             |
|              |             |             |
+--------------+-------------+-------------+

但一切都坐在左边，
这就是我得到的 - http://codepen.io/anon/pen/YwNzqa?editors=110

当它们的父级是绝对的时，是否可以 float 这些 div？

Answer 1

问题是 .position-modal 元素的高度为 0。这意味着 .modal 元素不考虑它们(导致它被定位到左边)。您会注意到，如果您在元素上设置 min-height，它将按预期工作:

Updated Example

.modal, .position-modal {
    box-sizing: border-box;
    float: left;
    width: 33.3%;
    min-height: 1px;
}

但是，在我看来，上面的解决方案是比较hackish的。除非有正当理由这样做，否则我只是建议使用 margin: 0 auto 来代替元素水平居中。

Updated Example

.modal {
    box-sizing: border-box;
    width: 33.3%;
    margin: auto;
}