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

最新推荐文章于 2021-11-05 23:32:23 发布

清，纯一色

最新推荐文章于 2021-11-05 23:32:23 发布

阅读量210

点赞数

原文链接：http://www.cnblogs.com/danielweb/p/4868586.html

版权

我们知道，当子元素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的时候呢，这时，连它自己都显示不出来了，之前一直没有遇到过这个问题，后来查阅资料，加上自己探索，发现只能手动设置父元素的宽高，所以在这里，与其说是分享，倒不如说是自己的一个小笔记吧~！好记性不如烂笔头嘛。

转载于:https://www.cnblogs.com/danielweb/p/4868586.html

清，纯一色

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于撑开父容器高度的小探讨

我们知道，当子元素float的时候，虽然没有脱离文本流，但是也会使父元素坍缩，也就是父元素的高度或者宽度变为0，解决办法就是让父元素的overflow为hidden。今天我遇到一个bug，如下代码所示：<div class="wrap"> <div class="main"> <img src="../JS+CSS3实现带预览图...
复制链接

扫一扫