父元素使用相对定位，子元素使用绝对定位，父元素怎么被撑开？

Question

如题父元素使用相对定位relative，子元素使用绝对定位absolute，这个时候子元素脱离了文档流，父元素的高度是0，我的需求是父元素怎么被撑开？父元素的高度根据子元素的高度自适应。最好使用css方法。

Answer 1

旧回答有误，请忽略

更新：
事实上旧回答给出的方法只能适用于子元素使用 float 的时候，没看清问题就随意作答，很抱歉。

因为 BFC 的高度计算包含浮动元素，同时清除浮动元素也会让父元素撑开，所以可以实现父元素被子元素撑开的需求。

但是 position:absolute 或者 position:fixed 就不一样，它是脱离文档流的，而且不会计算被父元素计算在内，同时也没有办法像浮动一样被清除。所以你的需求应该是无法满足的。

旧回答：
只要在父元素创建一个 BFC 就可以，或者清除浮动。
比如：

.parent{
    overflow:hidden;
}

或者

.parent{
    display:inline-block;
}

清除浮动

.child:after{
    content:'';
    clear:both;
    overflow:hidden;
    height:0px;
    *zoom:1;
}

你可以搜索一下怎么产生 BFC，和如何清除浮动。可以找出更多的方法

Answer 2

你用absolute就已经脱离文档流，又要文档把它算进里面去，这要求有点精分。你可以用relative定位，不是非得用absolute的。

再说，如果你父元素里没有其它元素，那用absolute的意义是什么。

Answer 3

不知道你为什么会有这样的需要，曾经写自适应轮播图的时候遇到过这个坑，我的做法是保留一个子元素使用相对定位，其他的子元素使用绝对定位，以保父元素不会坍塌

Answer 4

你这样的要求用css貌似是无法达到的，一般用到position:absolute的情况都是不需要管父元素大小的吧。。实在需要还是用float去吧

Answer 5

精分+1，用浮动吧

Answer 6

用js实现吧

Answer 7

做个记号：

浅析BFC及其作用
https://blog.csdn.net/riddle1...

CSS深入理解流体特性和BFC特性下多栏自适应布局
http://www.zhangxinxu.com/wor...

Answer 8

我也遇到过这个问题，我觉得楼主可能是想做个垂直tab页吧，把内容和标题绑到一起，然后内容可以顶格，而表格不必顶格