关于撑开父容器高度的小探讨

我们知道,当子元素float的时候,虽然没有脱离文本流,但是也会使父元素坍缩,也就是父元素的高度或者宽度变为0,解决办法就是让父元素的overflow为hidden。

今天我遇到一个bug,如下代码所示:

<div class="wrap">
    <div class="main">
        <img src="../JS+CSS3实现带预览图幻灯片效果/images/1.jpg" height="500" width="1280" alt="">
    </div>
    </div>
.wrap{
            position: relative;
        }
        .main{
            position: absolute;
        }
        img{
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }

设置了img为absolute后,绝对定位如果父级不使用position:relative,而直接使用position:absolute绝对定位,这个时候将会以body标签为父级,使用position:absolute定义对象无论位于DIV多少层结构,都将会被拖出以<body>为父级(参考级)进行绝对定位。,但它是脱离文本流的,也就是无论如何,它都撑不开父容器了,而当父容器也是absolute的时候呢,这时,连它自己都显示不出来了,之前一直没有遇到过这个问题,后来查阅资料,加上自己探索,发现只能手动设置父元素的宽高,所以在这里,与其说是分享,倒不如说是自己的一个小笔记吧~!好记性不如烂笔头嘛。

posted @ 2015-10-10 23:02  DanielLam  阅读(1011)  评论(0编辑  收藏  举报