当一个块级元素紧跟在一个左浮动元素之后时，它应该——作为一个块级元素——忽略这个浮动元素，而它的内容则应该因这个浮动元素而移位：一个紧跟在左浮动元素后的块级元素内的文字内容，应该沿着浮动元素的右边顺序排列并会（如果它的长度超过浮动元素）继续排列到浮动元素下方。但是如果这个块级元素有layout，比如由于某种原因被设置了宽度，那么这整个元素则会因浮动元素而移位，就好像它自己也是一个浮动元素一样，因此其中的文字就不再环绕这个左浮动元素了（而会形成一个矩形区域，保持在它的右边。）
在 IE5 中一个块级元素的百分比宽度是基于浮动元素旁边的剩余空间计算的，而在 IE6 中则是依照整个父块级元素的可用空间计算的。所以在 IE6 中设置 width: 100% 会导致某种浮动元素旁边的溢出现象，于是各种布局问题也会因此而来。
一些关于浮动块旁边的 hasLayout 块的测试案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS实战经验：浮动元素旁边的元素 - www.52CSS.com </title>
<style type="text/css">
<!--
.testgrid {padding:10px;}
.float {width:100px; height:100px; border:2px solid #000;float:left; background:url(bg.gif) repeat 10px 10px}
.testgrid p {background:#6c8; color:#fff; margin:0;}
#hasLayout p {width:300px;}
.testgrid::after {content:"[.]"; display:block; clear:both; visibility:hidden; height:0;}
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
.testgrid {zoom:1;}
p.x2, p.x3 {zoom:1;}
</style>
<![endif]-->
</head>
<body>
<div class="testgrid">
<div class="float">Floated block</div>
<p>PARAGRAPH – Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim www.52CSS.com</p>
</div>
<div class="testgrid" id="hasLayout">
<div class="float">Floated block</div>
<p>PARAGRAPH – Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim www.52CSS.com</p>
</div>
</body>
</html>
与此类似，和浮动元素相邻的相对定位元素，它的位置偏移量应该参照的是父元素的补白(padding)边缘(例如，left: 0; 应该将一个相对定位元素叠放于它前面的浮动元素之上)。在 IE6 中，偏移量 left: value; 是从浮动元素的右边距(margin)边缘开始算起的，这会因浮动元素所占的宽度变化导致水平方向的错位(一个解决方法是用 margin-left 代替，但是也要注意如使用百分值时会有一些怪异问题)。
layout blocks with relative positioning adjacent to floated blocks http://dev.l-c-n.com/IEW2-bugs/float-layout2-rp.php
根据规范所述，浮动元素应该与其后的盒子交织在一起。而对于没有交叉的二维空间中的矩形而言这是无法实现的。
如果谁真的需要向 IE 的这种不当行为屈服，那么如何让标准兼容浏览器中的盒子也有类似行为——即类似于 layout 盒子会自动“收缩”而给其前置的浮动元素让出空间的行为——就是一个问题了。我们给出的方法是跟着一个浮动元素创建一个新的块级格式化范围（block formatting context），这在我们的“和 CSS 规范类似的地方” 有讨论。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS实战经验：浮动元素旁边的元素 - www.52CSS.com </title>
<style type="text/css">
<!--
.testgrid {padding:10px;}
.testgrid::after {content:"[.]"; display:block; clear:both; visibility:hidden; height:0;}
.float {width:100px; height:100px; border:2px solid #000; float:left; background:url(bg.gif) repeat 10px 10px;}
.testgrid p {background:#6c8; color:#fff; margin:0;}
#t2 p {position:relative;}
#t3 p {position:relative; top:20px; left:20px}
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
.testgrid {zoom:1;}
p.x2, p.x3 {zoom:1;}
</style>
<![endif]-->
</head>
<body>
<div class="testgrid" id="t1">
<div class="float">Floated block</div>
<p>PARAGRAPH – Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim www.52CSS.com</p>
</div>
<div class="testgrid" id="t2">
<div class="float">Floated block</div>
<p>PARAGRAPH – Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim www.52CSS.com</p>
</div>
<div class="testgrid" id="t3">
<div class="float">Floated block</div>
<p>PARAGRAPH – Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. www.52CSS.com Ut wisi enim</p>
</div>
</body>
</html>
我们可以看到跟在一个浮动元素后的 layout 元素不会显示这个3px间隙的 bug，因为浮动元素外围的3px硬边无法影响一个 layout 元素的内部内容，所以这个硬边将整个 layout 元素右推了3px。好比一个防护罩，layout 可以保护其内部内容不受影响，但是浮动元素的力量却将整个防护罩推了开来。
整理的一段文章，记得还不错，分享~~~
评论