猿问

有无大佬知道CSS clear怎么用的呀？

都 说它是用来清除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.css

HTML代码如下：
<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;可是和没加一样，我运行的效果如图：

明月笑刀无情
浏览 310回答 2
2回答

慕盖茨4494581

代码没问题！换别的浏览器一测试就看到效果了！(浏览器兼容问题！!)我用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>
0

米脂

#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
随时随地看视频慕课网APP

相关分类

CSS3
JavaScript
我要回答