CSS教程:关于浮动

浮动的问题

浮动因脆弱而饱受诟病。大多数的脆弱性来自于 IE6 及其一系列的浮动相关 bug。因为越来越多的设计师不再支持 IE6 了，你也可以不关注它了。不过对于那些要关注的人来说，这里有些大概。

• 推倒是浮动元素内的元素（大多是图片）比浮动元素本身宽造成的现象。大多数的浏览器会在浮动之外渲染图片，但是不会有伸出来的部分影响其他布局。IE 会扩展浮动来包含图片，精彩大幅度地影响布局。一个普遍的例子是突破伸出主内容之外把侧栏推到下面。

  快速修正：确保不是图片造成这种情况，使用 overflow:hidden 来切除多余的部分。

• 双倍边距bug处理 IE6 时，另一个需要记住的事情是，如果在和浮动方向相同的方向上设置外边距(margin)，会引发双倍边距。快速修正：给浮动设置 display:inline; 而且不用担心，它依然是块级元素。
• 3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样。快速修正：在受影响的文本上设置宽度或高度。
• IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些仔元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。

替代品

如果需要文本环绕图片，除了 float 之外还真没多少替代品。说到这，可以看看这个使文本围绕不规则形状的聪明技术。对于页面布局，肯定有很多选择。Eric Sol 在 A List Apart 上有一篇文章人造绝对定位，介绍了一个很有意思的技术，它在很多方面把浮动的扩展性和绝对定位的实力结合起来。CSS3 有Template Layout Module，当它被广泛支持时，将会是一个页面布局技术的选择。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!