css - 浮动DIV如何自适应高度

Answer 1

绝对定位和浮动不一样，绝对定位是完全脱离文档流
所以，在子元素采取绝对定位的情况下，是不可能直接靠内容撑开父容器高度的。ps：楼上关于清除浮动回答的很详细，但是在这里感觉答非所问

Answer 2

关键字： css 清除浮动

由于浮动元素不占据正常的文档流空间，所以其父元素的尺寸是不会被浮动元素撑起来的。

解决办法：

1 在浮动元素后面插入一个空p.clear

.clear {
    clear:both; 
    height: 0; 
    line-height: 0; 
    font-size: 0;
}
.float {
    float: left;
}

<p>
    <p class="float">Float element</p>
    <p class="clear"></p>
</p>

2 父元素overflow: hidden或者display: table来闭合浮动

<p style="overflow: hidden;">
    <p class="float">Float element</p>
</p>

3 巧用伪类

父元素添加类.clearfix

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
/* for ie 6/7 */
.clearfix {
    zoom: 1;
}

<p class="clearfix">
    <p class="float">Float element</p>
</p>

Answer 3

浮动是一个将要被淘汰的属性，你可以选择flex布局

Answer 4

如果是float导致的父元素高度塌陷，则可以通过清除浮动使父元素被撑开，但是如果是由于absolute导致的父元素高度塌陷，则无法清除，因为绝对定位是完全脱离文档流。

Answer 5

首先。p的高度默认是由内部的子元素撑开来的。
.line的内部为空，高度为0,
.icon和.make绝对定位之后脱离文档流，不占位置（上天了），
.a下面的内容的高度为0。所以高度为0

.a和.b是独立的两块兄弟，得到相同的高度从自动上来说不可能。

PS：absolute != float