首頁(yè) 猿問(wèn) 有無(wú)大佬知道CSS...

有無(wú)大佬知道CSS clear怎么用的呀？

CSS3 JavaScript

明月笑刀無(wú)情 2021-10-26 19:15:10

都說(shuō)它是用來(lái)清除float元素的，可是我用了一點(diǎn)反應(yīng)都沒(méi)有。。請(qǐng)高手幫我看看是哪兒的問(wèn)題，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>請(qǐng)?jiān)谧约弘娔X上運(yùn)行一下，我在foot 中加了clear:both;可是和沒(méi)加一樣，我運(yùn)行的效果如圖：

查看完整描述

2 回答

慕蓋茨4494581

TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個(gè)贊

代碼沒(méi)問(wèn)題！換別的瀏覽器一測(cè)試就看到效果了！(瀏覽器兼容問(wèn)題！!)
我用IETester試了下?。。ü烙?jì)你的瀏覽器是基于IE6,IE7的）
你不加clear:both在火狐,IE8中打開(kāi)??！肯定是不行的foot會(huì)浮上去?。?！但在IE6,7是顯示正常頁(yè)面！！
而加了clear:both瀏覽器所顯示的效果都一致了(IE5沒(méi)試)??！
代碼沒(méi)改就是放到一個(gè)頁(yè)面里你試試
<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>

反對(duì) 回復(fù) 2021-10-31

米脂

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個(gè)贊

#foot
{
clear:both;
width:100%;
height:20px;
background:#789;
}
你寬度已經(jīng)定成了100%，什么效果。
你把寬度改成50%，再在<div id="foot"></div>下加一個(gè)<div id="foot1"></div>
他的樣式與#right
{
float:right;
width:200px;
height:300px;
background:#399;
}一樣
你這個(gè)時(shí)候再試下有clear和沒(méi)clear的區(qū)別