dreamweaver里的clear是什麼意思?

html-css021

dreamweaver里的clear是什麼意思?,第1张

清除浮动的意思,一般这样用

.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>