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