如何处理只包含绝对定位的孩子的元素？

Question

我有一个包含2个绝对定位的标题和段落元素的框，我正在尝试如何居中文本的方法，我尝试使用此site中的方法进行修改。

现在问题不在于如何定位文本，因为这不是我的问题所以你不应该解决这个问题。

我的问题是这个。

如何让父元素包含它的子元素？

由于父元素包含绝对定位的元素，这意味着子元素不在流中，而父元素也会折叠。

现在这是一个令人震惊的事情，因为我发现浮动的相同方式使用的包含/包装方法根本不起作用。

1. Clearfix方法。
2. 清除div方法
3. 溢出方法。

它们根本不起作用！

唯一正常工作的方法是“显式高度”方法，该方法非常低效，不可预测（可能在较小的窗口上中断）而且不流畅。

这是一个简单的，固定宽度的圆角框，我想使用上面提到的方法将“h1”和“p”元素集中在一起。

示例CSS，

body {
    margin: 8px;
    padding: 0;}

.box {
    margin: 0;
    padding: 0;
    width: 335px; 
    position: relative;
    background: #40331A url(bottom.gif) no-repeat left bottom;}

.inner {
    background: url(top.gif) no-repeat left top;}

.box h2 {
    width: 180px;
    height: 27px;
    top: 50%;}

.box p {
    width: 120px;
    height: 20px;
    top: 50%;}

.box h2, .box p {
    margin: 0;
    position: absolute;}

示例标记，

<div class="box">
 <div class="inner">
  <h2>This is a heading.</h2>
  <p>This is a paragraph.</p>
 </div>
</div>

所以我的问题。

有没有简单的方法让父元素包含其绝对定位的子元素？

Answer 1

绝对定位元素的整个要点是这些元素的父元素应该布局，就好像那些元素永远不存在一样。如果您希望父元素的布局考虑其子元素，请不要绝对定位它们。

由于你没有包括position: absolute以外的任何相关属性，因此绝对定位元素默认为静态位置似乎完全是多余的。只需删除该声明即可。它没有比这简单。

这些方法都不起作用的原因是因为它们是为浮点数设计的，绝对定位的元素不是浮点数：

1. 你不能真正“清除”任何不是浮动的东西。
2. 同上。
3. 设置overflow适用于浮点数的原因是浮动参与块布局的方式的结果，这不适用于绝对定位的元素。这究竟是什么意思落在这个问题的范围之外，而是阅读块格式化上下文。