浮动DIV如何自适应高度

DivenLee
  • 11
      <div class="box">
        <div class="a">
          <div class="line"><!--这里为空元素--></div>
          <div class="icon"><!--position: absolute;--></div>
          <div class="make"><!--position: absolute;--></div>
        </div>
        <div class="b" style="height: 520px;">
        </div>

.a,.b
都是{
float: left;

width: 150px;
position: relative;
}

icon和 make是absolute。都只是浮动的DIV背景图片

请问,line和a,如何才有高度?现在的高度是0的,如何得到和b元素一样的高度呢?

回复
阅读 7.5k
5 个回答
✓ 已被采纳

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

cesiya23
  • 265

关键字: css 清除浮动

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

解决办法:

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

.clear {
    clear:both; 
    height: 0; 
    line-height: 0; 
    font-size: 0;
}
.float {
    float: left;
}
<div>
    <div class="float">Float element</div>
    <div class="clear"></div>
</div>

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

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

3 巧用伪类

父元素添加类.clearfix

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
/* for ie 6/7 */
.clearfix {
    zoom: 1;
}
<div class="clearfix">
    <div class="float">Float element</div>
</div>

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

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

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

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

PS:absolute != float

宣传栏