都 说它是用来清除float元素的，可是我用了一点反应都没有。。请高手帮我看看是哪儿的问题，CSS代码如下：#head{width:100%;height:20px;background:#789;}#left{float:left;width:200px;height:300px;background:#823;}#right{float:right;width:200px;height:300px;background:#399;}#foot{clear:both;width:100%;height:20px;background:#789;}CSS文件叫page.cssHTML代码如下：<link href="page.css" rel="stylesheet" type="text/css"><body><div id="head"></div><div id="left"></div><div id="right"></div><div id="foot"></div></body>请在自己电脑上运行一下，我在foot 中加了clear:both;可是和没加一样，我运行的效果如图：
2 回答
慕盖茨4494581
TA贡献1850条经验 获得超11个赞
代码没问题！换别的浏览器一测试就看到效果了！(浏览器兼容问题！!)
我用IETester试了下！！（估计你的浏览器是基于IE6,IE7的）
你不加clear:both在火狐,IE8中打开！！肯定是不行的foot会浮上去！！！但在IE6,7是显示正常页面！！
而加了clear:both浏览器所显示的效果都一致了(IE5没试)！！
代码没改就是放到一个页面里你试试
<html>
<head>
<title> New Document </title>
<style type ="text/css">
#head{width:100%; height:20px; background:#789;}
#left{float:left; width:200px; height:300px; background:#823;}
#right{float:right; width:200px; height:300px; background:#399;}
#foot{clear:both; width:100%; height:20px; background:#789;}
</style>
</head>
<body>
<div id="head">head</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="foot">footer</div>
</body>
</html>
米脂
TA贡献1836条经验 获得超3个赞
#foot
{
clear:both;
width:100%;
height:20px;
background:#789;
}
你宽度已经定成了100%，什么效果。
你把宽度改成50%，再在<div id="foot"></div>下加一个<div id="foot1"></div>
他的样式与#right
{
float:right;
width:200px;
height:300px;
background:#399;
}一样
你这个时候再试下有clear和没clear的区别
添加回答
举报
0/150
提交
取消