这其实是一个非常普通的问题，在 很久 很久 很久，真的很久以前，已经被说过很多次了，不过都是英文的，其实中文的也有很多，但是我还是想翻一下，一方面自己加深印象，两一方面很多初学者也可以很容易搜都，看到。那么就开始了。
问题描述就是，当使用了浮动(float)布局的时候，就是父层的高度不会自动扩展到浮动子层的高度，具体表现为，子层的高度出来了，但是利用开发工具看的话，只能看到子层的高度，父层就只有那么一点点高。
解决办法其实很简单，1. 在浮动元素之后使用 clear 属性，清除浮动即可，2. 给父元素使用 clearfix 属性，但是IE支持有问题。3. 使用 overflow 属性，这里就着重讲一下 overflow 清除浮动的方法。
例子一：
此例子主要讲解浮动内容子层，没有把父层撑开的问题，简单的结构可以如下。
<div class="container">
<div class="a"></div>
<div class="a"></div>
</div>.a {float:left;}这就会导致父层不被撑开的问题，解决方法很简单，父元素 overflow:auto 或者 overflow:hidden。即：
.container {
overflow: auto;
}如图：
例子二：
overflow: auto; 也可以被用作阻止文字环绕图片，例如 再设计 WP 博客的评论时，一个头像在左侧，评论内容在右侧，又不能设置宽度等，此时就可以给评论的层设置 overflow: auto; 即可，优点就是不用设置宽度或者浮动，即可使文字自动不环绕图片，又在其后。
如图：
.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
来源：翻译