.claer{clear:bothzoom:1}
.abc{width:100heitht:30pxfloat:left:}
.aaa{width:150heitht:30pxfloat:left}
<div>
<div class="abc " ></div>
<div class="aaaa clear"></div>
<div class="abc"></div>
</div>
上面<div class="aaaa clear"></div>在aaaa后面加了个clear
后面的<div class="abc"></div>就不会向左浮动了;
在css中能够实现换行的代码有如下几个:1、display:block//将标签改成块元素,块元素是单独占一行的。
2、clear:both; //清除浮动实现换行。
3、white-space:break; //这个一般适用在英文文章中的折行。
可以根据上面的几个能实现换行的样式,只需要将对应标签的对应属性删除就可以了。
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:0pxpadding:0px}
div{border:2px #00ff00 solidmargin:20px}
#container{width:980pxmargin:0px auto}
#header{height:150px}
#footer{height:150px}
#mid{height:150px}
#left,#center,#right{width:240px}
#left{float:left}
#center{float:left}
#right{ float:leftwidth: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>