原文：http://www.yuiblog.com/?p=2820
作者：Thierry Koblentz
尽管这种情况通常被称为"浮动下坠"或者"浮动下沉",但实际上下坠或下沉的列并不一定是浮动的……只要它比预留给它的空间更宽就有可能出现下沉。请记住这是一种特定情况下才会发生的在跨浏览器时很常见的行为——网页的某一栏太宽了，于是它下沉了。
IE 6的问题之所以突出，是因为它对 width 这个属性的支持不完整（height 也好不到哪里去）。因此，IE 6会让容器扩展以适应内容。而为这个容器设计的宽度却没法随之变宽，于是IE 6对容器宽度的自动扩展就造成了它的下沉。
通常情况下，罪魁祸首是那些无法包围的元素（比如图片、url等），但是文字样式（例如 IE 和 斜体）也有可能造成这种情况。
例如，要让YUIBlog的右栏在IE 6中下沉，我只需要让右栏中的某个图片的宽度大于210px。这张图将会强迫IE 6增加右栏的宽度，这样右栏就无法再保持在左栏旁边了。
常见修复方法：
word-wrap: break-word;//强制文字截断（译注：主要针对非双字节语言，把单词强制截断）。wbr with wbr:after {content:"\00200B"};//针对 Opera，wbr属性代表行截断的机会。在长文字中添加wbr以便在必要时允许浏览器换行。overflow-x:hidden;//隐藏溢出容器的所有内容。
要注意的是前两种方式只适用于文字，不能放置图片撑开容器。
已知会导致修复失败的情况
几周前，我遇到要为yahoo!财经的页面修复“浮动下沉”的bug。在现代浏览器中，一行长文字超出了容器显示在容器右侧外部（查看截图），但是在IE 6下，同样的文字造成了右栏下沉到主栏下方（查看截图）。麻烦的是，这部分内容是由外部提供，因此没办法对HTML代码进行修改。
由于这行文字是一组由逗号分隔的标签列表，因此之前提到的几种修复方法都不能满足需要。在这行文字内部任意位置强行截断当然比隐藏溢出部分要好，但这也不是可行的解决方案。
让IE 6正常显示
要让IE 6像其它现代浏览器一样显示这行文字，方法是给文字的容器的右边距设置一个负值（同时还要设置相对定义position:relative）。
效果演示
没有修正时
fix 修正以后
代码示例：
.fixMe {
margin-right:-100px;
position:relative;
}
负边距可以设置为任意大的值，只要大于实际所需宽度和指定宽度的差值即可。这就是我所说的放置浮动下沉的方法。设置相对定位（position:relative）的目的是让IE能够显示超出了父元素边缘的内容。
Things to consider 补充说明
这个hack能保证每一栏都呆在应该在的位置上，但是无法阻止溢出内容的容器变宽。因此你不能在该容器上应用背景或者边框样式，否则这些样式都会显示到父元素外部。下面有个截图，演示了在IE 6下使用这个方法同时设置边框和背景的效果：
By 小李刀刀 2011-01-26 - 14:38
我已经重新在我的博客上发了，你可以下载或在线观看。
By adengweb 2011-01-25 - 11:33
http://www.99css.com/?p=680。
从涛哥哥的这个链接进去。优盘提示“该文件的共享已到期，您可以提醒分享者续期 ”
还有就是飞飞哥哥是我看错了。以前看了个电视剧叫小李飞刀。 所以第一感觉就想到了飞飞哥哥。/heihei
By 全球译M188 2011-01-20 - 10:20
挺有用的，谢谢了！
By 宁波网站建设 2011-01-17 - 09:46
我没有用IE6了，现在还有人用？
By adengweb 2011-01-13 - 20:00
飞飞哥哥。可以把CssGaga的这个演示视频在发布一次木？
By 小李刀刀 2011-01-14 - 22:14
CssGaga的视频，虽然是我做的，不过是涛哥亲自发布的。你可以在这里找到：http://www.99css.com/?p=680。
另外，为什么是“飞飞哥哥”呢？……
By adengweb 2011-01-25 - 11:30
从涛哥哥的那个链接去下载链接说 “该文件的共享已到期，您可以提醒分享者续期” 写错了是小刀哥哥。
By 模板之家 2010-11-02 - 22:19
谢谢分享。。。学习了。。。
用overflow：hidden 隐藏可否？
By 小李刀刀 2010-11-02 - 22:25
在文中作者首先已经给出来三种最常见的解决办法，其中第三种就是overflow:hidden。在某些情况下（比如本文中作者所举的例子，强制隐藏并不合适，会造成需要显示的内容不能正常显示。）
所以作者采用的办法是对于这种非常特殊的情况，允许文字超出容器显示。