folat布局布局

最新推荐文章于 2022-04-08 18:07:23 发布

kuwyzz

最新推荐文章于 2022-04-08 18:07:23 发布

阅读量2.1k

点赞数

文章标签： div float xhtml class html 浏览器

本文链接：https://blog.csdn.net/kuwyzz/article/details/1117831

版权

<!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;}
#head,#foot {height:50px;background:#ccc;}
#box {background:#ccc url("*.gif");}
.left {float:left;width:200px;height:100px;background:#ddd;}
.right {float:right;width:550px;height:100px;background:#eee;}
-->
</style>

</head>
<body>
<div id="head">HEAD</div>
<div id="box">
<div class="left">LEFT</div>
<div class="right">RIGHT - 请用非IE浏览器查看</div>
</div>
<div id="foot">FOOT</div>
</body>
</html>

因为#box的.left与.right都浮动了，所以#box计算不到子元素的高度;导致#box没有获得高度，没有高度就局限了background与border的显示区域。

解决方案一：
.left与.right不浮动就能计算高度了，哈哈，估计你们要K死俺。

解决方案二：
增加一个容器
.ad {clear:left;}
在.right后面再加一个容器.ad，让它清除浮动。

<!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;}
#head,#foot {height:50px;background:#ccc;}
#box {background:#ccc url("http://blog.pr1984.com/skins/pr/UBB/Icons/smiley.gif");}
.left {float:left;width:200px;height:100px;background:#ddd;}
.right {float:right;width:550px;height:100px;background:#eee;}

.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>

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

解决方案三：
#boxBg {float:left;}
再#box后面再加一个容器#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;}
#head,#foot {height:50px;background:#ccc;}
#box {background:#ccc url("http://blog.pr1984.com/skins/pr/UBB/Icons/smiley.gif");}
.left {float:left;width:200px;height:100px;background:#ddd;}
.right {float:right;width:550px;height:100px;background:#eee;}

#boxBg {float:left;}
-->
</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>
因为#boxBg也浮动起来了，所以它跟里面的.left与.right是属于一个层面上的位置，所以这样#boxBg就能计算子元素的高度了。
#box用来限制宽度以及居中，background和border的显示与高度计算就用#boxBg来实现。

演示图：

kuwyzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
folat布局布局

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml">实例一* {font:normal 12px/150% "宋体",Arial;padding:0;margin:0;}body {text-align:center;}#head,#box,#foot {width:750px;marg
复制链接

扫一扫