float:left时无法影响父元素高度

有的时候元素的定位用css样式表却是不如用table来的直接。开发中为了元素左右分开经常需要把div定义成float:left或float:right的。

示例:

<div class="main">
    <div id="div1" style="float:left">
    .....
    </div>
    <div id="div2" style="float:left">
    .....
    </div>
    <div id="div3" style="float:right">
    .....
    </div>
</div>

这是一个典型的左中右布局,父元素main是整个页面的框架,三个子元素通过定义各自宽度和float(漂浮)属性来实现左右布局。 这个时候通常遇到的问题是即使三个子元素的内容再多也无法让父元素的高度随着子元素的高度自适应。

这是为什么呢,float就是漂浮的意思,元素都飘起来了还怎么影响其父类元素呢?

其实,我们只要告知父元素,高度随着子元素的增加自适应就好:

.main{
    overflow:auto;
}

overflow的意思是自动适应溢出。

我们对overflow:auto的使用上常常存在误解,以为这是自动出现滚动条的声明,滚动条的出现是因为我们定义了元素的高度,如果子元素高度预先定义的父元素高度,滚动条就会自动显示。

所以若想让父元素自动适应漂浮的子元素的高度将overflow设为auto,并切记不要定义父元素的高度属性。