这其实是一个非常普通的问题,在 很久 很久 很久,真的很久以前,已经被说过很多次了,不过都是英文的,其实中文的也有很多,但是我还是想翻一下,一方面自己加深印象,两一方面很多初学者也可以很容易搜都,看到。那么就开始了。

问题描述就是,当使用了浮动(float)布局的时候,就是父层的高度不会自动扩展到浮动子层的高度,具体表现为,子层的高度出来了,但是利用开发工具看的话,只能看到子层的高度,父层就只有那么一点点高。

解决办法其实很简单,1. 在浮动元素之后使用 clear 属性,清除浮动即可,2. 给父元素使用 clearfix 属性,但是IE支持有问题。3. 使用 overflow 属性,这里就着重讲一下 overflow 清除浮动的方法。

例子一:

此例子主要讲解浮动内容子层,没有把父层撑开的问题,简单的结构可以如下。

1
2
3
4
<div class="container">
    <div class="a"></div>
    <div class="a"></div>
</div>
1
.a {float:left;}

这就会导致父层不被撑开的问题,解决方法很简单,父元素 overflow:auto 或者 overflow:hidden。即:

1
2
3
.container {
    overflow: auto;
}

如图:
overflow-auto

例子二:

overflow: auto; 也可以被用作阻止文字环绕图片,例如 再设计 WP 博客的评论时,一个头像在左侧,评论内容在右侧,又不能设置宽度等,此时就可以给评论的层设置 overflow: auto; 即可,优点就是不用设置宽度或者浮动,即可使文字自动不环绕图片,又在其后。

如图:

1
2
3
4
5
6
.image {
    float: left;
}
.text {
    overflow: hidden;
}

问题:

1. overflow: auto; 如果文字很长,或者图片很大,总之内容超出了父层规定的区域,那么就会产生滚动条。

解决办法
1. 使用 overflow: hidden; 当然,如果你意思是多余内容要产生滚动条,那就用 auto;
2.使用 word-wrap: break-word;(文字) 和 max-width: 100%;(图片,使用后就自动缩放了)(当然,IE6 你懂得,我几乎放弃它了,不过

demo 那么就要出现了。

demo1

demo2

来源:翻译