css中float:left和clear:both怎么用的？
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"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:right;
}
#right{
float:right;
width:420px;
}
</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>
这个代码中怎么修改能使有left right center字的3个框子按左中右排布？而且在这3个框子中打任意多的字也不会破坏左中右的布局？
float:left clear:both 还有div在CSS手册上倒是有用法，但是没有实例我搞不懂啊,有哪里有详细介绍CSS用法的? 展开
"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:right;
}
#right{
float:right;
width:420px;
}
</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>
这个代码中怎么修改能使有left right center字的3个框子按左中右排布？而且在这3个框子中打任意多的字也不会破坏左中右的布局？
float:left clear:both 还有div在CSS手册上倒是有用法，但是没有实例我搞不懂啊,有哪里有详细介绍CSS用法的? 展开
展开全部
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>
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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
float是用在浮动一般一排有两个div你就要加，但加了float就要加宽度要不w3c检验就能会报错
clear:both一般是在dw里面错位了就用它
clear:both一般是在dw里面错位了就用它
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Vue实践-CSS样式position/display/float属性对比使用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
