父元素相对定位 高度auto，子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素

Question

脱离文档流的两种方法：float 和 position:absolute/fixed

前提：父元素高度自动，需要子元素撑开父元素

当子元素使用 float 时，脱离文档流，父元素高度塌陷，但是可以使用 zoom:1 + 伪元素 使其清除浮动，从而使得父元素高度被子元素撑开。

但是当使用 position:absolute 时，给父元素添加 position:relative 父元素高度塌陷，此时如何使得父元素的高度被子元素撑开？

Answer 1

css 貌似无法直接实现这个需求。可以用上js来获取子元素的高度然后再对父元素进行修改。
html
<div class="a"><div class="b">sss</div></div>

css
.a{ width: 200px; position: relative; background-color: red;}
.b{position: absolute;height: 50px;}

js
var one = document.querySelector(".b").offsetHeight;
document.querySelector(".a").style.height = one+'px';

Answer 2

如其他所答 基本css现在没有什么解决方案 用jQuery或者js吧~如下代码

    <script>
        (function(){
            $('.baba').css({ 
                'width':$('.erzi').css('width'),//获取子元素的宽度
                'height':$('.erzi').css('height') //获取子元素的高度
            });
        })()
    </script>

Answer 3

css无法直接实现这个需求 本身absolute就是脱离文档流的 然后非得再让它包含在文档流计算当中 未免有点不太合适。还是结合具体场景换一下思路去解决吧

Answer 4

纯粹的CSS无法实现。因为position:absolute就是脱离文档流，怎么能让父元素不塌陷呢？ 楼上的JS也许是个办法。

Answer 5

如果子元素是float浮动的话倒是有办法，float属性只是浮动，没有完全脱离标准文档流（文档流+文本流），脱离了文档流，没有脱离文本流（在其他博客看到的解释），可以通过给父元素添加overflow属性等方法解决。position的话是完全脱离了标准文档流了，所以必然导致父元素的塌陷，所以应该是没有直接的css方法阻止。