div+css

当前位置:地方网站工作室 >> 网络技术 >> div+css >> 浏览文章

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

文章来源:菏泽网站建设  文章作者:呐喊网络部落格  日期:2009年09月14日
这个问题应该是使用标准布局发生兼容性问题的“典范”了,干网页制作的人几乎都遇见过,我在做页面的时候也遇见过。

这个问题应该是使用标准布局发生兼容性问题的“典范”了,干网页制作的人几乎都遇见过,我在做页面的时候也遇见过。因为#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不浮动就能计算高度了。

追求卓越 精心缔造 菏泽网站建设 地方网络工作室
上一篇:公用样式模板的设计制作
下一篇:CSS教程:清除浮动的方法大全
相关文章

我们能为菏泽企业做什么?

菏泽企业网站建设
DIV+CSS布局技术、底层SEO规划设计、菏泽地方网络工作室为您提供优质网站建设服务!
SEO网站推广策划
菏泽唯一SEOwhy认证的SEOER,全面的SEO推广方案,为您量身定制SEO网站推广策划!
国内顶级服务器
新网互联、中国频道、美国主机、韩国主机、地方网络工作室只提供最优质的服务器主机!
《书生商友》商机群发软件
Booksir,一步到位彻底解决中小企业网络整合营销的书生商友营销引擎!

公告

怎么联系我们?

手机:18651363941
地址:由于菏泽生存压力巨大,本人现未居菏泽,在北京就值。如有业务需要,请直接电联。
联系人:刘峰 高娜
QQ:61572536
微信:61572536
邮箱:guf521@163.com

服务宗旨

因为执着 所以专业 追求卓越 精心缔造
售后为先 宁得罪新客户  不拖拉老客户
诚信为本 新互顶级域名空间  畅爽速度