使用Float布局Box高度出错的三个解决办法

这个问题应该是使用标准布局发生兼容性问题的“典范”了，干网页制作的人几乎都遇见过，我在做页面的时候也遇见过。因为#box的.left与.right都浮动了，所以#box计算不到子元素的高度;导致#box没有获得高度，没有高度就局限了background与border的显示区域。

解决方法一：

#boxBg {float:left;}

再#box后面再加一个容器#boxBg，让它浮动起来。因为#boxBg也浮动起来了，所以它跟里面的.left与.right是属于一个层面上的位置，所以这样#boxBg就能计算子元素的高度了。#box用来限制宽度以及居中，background和border的显示与高度计算就用#boxBg来实现 。

代码如下

解决方法二：

.ad {clear:left;}
在.right后面再加一个容器.ad，让它清除浮动。这招是把最底（后）的.ad设置清除浮动，这样#box就能计算到.ad的实际位置。即使#box没有计算到.left与.right的位置也无所谓了，因为.ad始终是在最下面的。所以只要计算到了它就OK了~！

代码如下

解决方法三：

干嘛非要让.left与.right浮动啊？.left与.right不浮动就能计算高度了。

原文地址：http://bjnahan.net/post/842.htm