CSS中clear:left和float: left分别表示什么意思?
2个回答
展开全部
float:left;
是用于想使div成为一行..
clear:both;
是用于清楚上边属性的浮动
你的代码首先设置就有错误你设置left
center
right都为240px
又单独设置
right为420px;left+center+right=900
;你又设置了border:2px
margin:20px;你可以算下这样已经超出了mid的范围
你的right最多可以设为296px;
这样三个才能成为一行..
<"
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd
">
<html>
<head>
<title>index
page</title>
<style
type="text/css">
body{margin:0px;padding:0px;}
div{border:2px
#00ff00
solid;
margin:20px;}
#container{width:980px;margin:0px
auto;}
#header{height:150px;}
#footer{height:150px;}
#mid{height:150px;}
#left,#center,#right{width:240px;}
#left{float:left;}
#center{float:left}
#right{
float:left;width:296px
}
</style>
</head>
<body>
<div
id="container">
<h2
color="red">layout</h2>
<div
id="header">header</div>
<div
id="mid">
<div
id="left">left</div>
<div
id="center">center</div>
<div
id="right">right</div>
<div
style="clear:both"></div>
</div>
<div
id="footer">footer</div>
</div>
</body>
</html>
是用于想使div成为一行..
clear:both;
是用于清楚上边属性的浮动
你的代码首先设置就有错误你设置left
center
right都为240px
又单独设置
right为420px;left+center+right=900
;你又设置了border:2px
margin:20px;你可以算下这样已经超出了mid的范围
你的right最多可以设为296px;
这样三个才能成为一行..
<"
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd
">
<html>
<head>
<title>index
page</title>
<style
type="text/css">
body{margin:0px;padding:0px;}
div{border:2px
#00ff00
solid;
margin:20px;}
#container{width:980px;margin:0px
auto;}
#header{height:150px;}
#footer{height:150px;}
#mid{height:150px;}
#left,#center,#right{width:240px;}
#left{float:left;}
#center{float:left}
#right{
float:left;width:296px
}
</style>
</head>
<body>
<div
id="container">
<h2
color="red">layout</h2>
<div
id="header">header</div>
<div
id="mid">
<div
id="left">left</div>
<div
id="center">center</div>
<div
id="right">right</div>
<div
style="clear:both"></div>
</div>
<div
id="footer">footer</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询