IE6浮动层错位

当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7及其他标准浏览器里，超出的内容仅仅只是超出边缘；但在IE6中容器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素，那么就会导致错位问题。

by zicai

HTML

<!--当浮动容器的内容宽度超出容器本身的宽度，在标准浏览器里，文字内容会溢出容器，在ie6下会把容器撑开 -->
<div class="fl">
    sdfsfsdffsdfasdfsadfasfds
</div>
<div class="clear">割=============================</div>
<!-- 更复杂的实例 ,在IE6下.right会被挤到下一行-->
<div class="wrap">
    <div class="left">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div class="right">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

CSS

.wrap {
    width: 400px;
    height: 40px;
    background-color:red;
}
.left {
    float:left;
    width: 200px;
    height: 30px;
    background-color:yellow;
}
.right {
    float:left;
    width: 200px;
    height: 30px;
    background-color:#c1c1c1;
}
.fl{
    float:left;
    width: 50px;
    background-color:pink;
}
.clear{
    height: 40px;
    line-height: 40px;
    clear:both;
}