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