分类: H5/JS/CSS

Float浮动布局Box高度冲突的三个解决办法

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

解决方法一：

#boxBg {float:left;}

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

代码如下

以下为引用的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>实例一</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {font:normal 12px/150% "宋体",Arial;padding:0;margin:0;}
body {text-align:center;}
#head,#box,#foot {width:750px;margin:0 auto;text-align:left;}
.left {float:left;width:200px;height:100px;}
.right {float:right;width:550px;height:100px;}
#boxBg {float:left;background:#ccc;}
-->
</style>
</head>
<body>
<div id="head">HEAD</div>
<div id="box"><div id="boxBg">
<div class="left">LEFT</div>
<div class="right">RIGHT - 请用非IE浏览器测试</div>
</div></div>
<div id="foot">FOOT</div>
</body>
</html>


解决方法二：

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

代码如下

以下为引用的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>实例一</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {font:normal 12px/150% "宋体",Arial;padding:0;margin:0;}
body {text-align:center;}
#head,#box,#foot {width:750px;margin:0 auto;text-align:left;}
#box {background:#eee;}
.left {float:left;width:200px;height:100px;}
.right {float:right;width:550px;height:100px;}
.ad {clear:left;}
-->
</style>
</head>
<body>
<div id="head">HEAD</div>
<div id="box">
<div class="left">LEFT</div>
<div class="right">RIGHT - 请用非IE浏览器测试</div>
<div class="ad"></div>
</div>
<div id="foot">FOOT</div>
</body>
</html>


解决方法三：

干嘛非要让.left与.right浮动啊？.left与.right不浮动就能计算高度了。
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=1451

这篇日志没有评论。

此日志不可发表评论。