Seeker

我们在使用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解决。

//===============================================