我们在使用float进行布局设计时经常会遇到这样的困扰
当包围容器下的元素全部是浮动元素时，包围容器不能在视觉上包围子元素。
这是因为浮动元素脱离了文档流，所以包围容器也不占据空间。对于此我们常用的方法是使用overflow进行处理，当然也可以用clear。
来看一下overflow的几个用法：
一、overflow的用法
1、清理float
我们可以使用overflow:heddden 或者overflow:auto 来清理浮动元素。
.wrapper{
overflow:auto;
}
2、防止文字环绕图片 demo
overflow还能起到防止文字环绕图片的效果。假设我们想实现这样的效果：左边是头像，右边是bio。这儿就可以使用overflow来实现这样的效果
.bio{
overflow:auto;
}
二、overflow的缺陷及补救
1、overflow的缺陷 Demo
overflow虽然用起来很顺手，但是它也有其缺陷。当浮动元素的宽度超过包围元素的宽度时（如出现长网址或者大图片），就会出现异常。
1、overflow:auto:当浮动元素的宽度超过包围元素的宽度时，就会出现滚动条。
2、overflow:hidden:当浮动元素的宽度超过包围元素的宽度时，hidden导致内容丢失。
2、缺陷的补救 Demo
1、使用word-wrap强制断词换行
.container {
word-wrap: break-word;
}
2、设置max-width防止图片超出范围.
.container img {
max-width: 100%;
height: auto;
}
update 2011-03-12
感谢飘流同学的提醒，IE6及其以下中不支持max-width，对overflow支持也有问题,不过可以用_width或JS解决。
//===============================================