<1>
<!DOCTYPE html><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><style type="text/css">#header {height:100px;width:600px;background:blue;margin:0px auto; /*上下外边距是0px,左右外边距是自动 即：左右居中*/}#main {/*height:500px;*/width:600px;margin:0px auto;}#left {height:300px;width:150px;float:left;background-color:gold}#center {height: 300px;width: 300px;float: left;background: dimgrey;}#right {height: 300px;width: 150px;float: left;background-color: yellow;}#bottom {/*现在我就来说说这个clear 因为#main 这个div是一个大盒子，里面包裹这两个小盒子，这个大盒子没有设置高度，即它的高度为0px，而当大盒子里面的两个小盒子浮动起来了，那么这个#tottom这个下边的盒子就会占据到#header的下面 效果图请看 图1*//*clear:both;*/ /*因为上面的三个盒子都浮动了。我这个盒子不想浮动，所有这里我要清除浮动*/height: 100px;width: 800px;margin: 0px auto;background-color: gray;}</style></head><body ><div id="header">头（#header）</div><div id="main"><div id="left">左（#left）</div><div id="center">中（#center）</div><div id="right">右（#right）</div></div><div id="bottom">下（#bottom）</div></body></html>
图1
<2>
<!DOCTYPE html><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><style type="text/css">#header {height:100px;width:600px;background:blue;margin:0px auto; /*上下外边距是0px,左右外边距是自动 即：左右居中*/}#main {/*height:500px;*/width:600px;margin:0px auto;}#left {height:300px;width:150px;float:left;background-color:gold}#center {height: 300px;width: 300px;float: left;background: dimgrey;}#right {height: 300px;width: 150px;float: left;background-color: yellow;}#bottom {/*现在我就来说说这个clear 因为#main 这个div是一个大盒子，里面包裹这两个小盒子，这个大盒子没有设置高度，即它的高度为0px，而当大盒子里面的两个小盒子浮动起来了，那么这个#tottom这个下边的盒子就会占据到#header的下面 效果请看 图1 */clear:both; /*因为上面的三个盒子都浮动了。我这个盒子不想浮动，所有这里我要清除浮动 加了这么一句，效果请看 图2 */height: 100px;width: 800px;margin: 0px auto;background-color: gray;}</style></head><body ><div id="header">头（#header）</div><div id="main"><div id="left">左（#left）</div><div id="center">中（#center）</div><div id="right">右（#right）</div></div><div id="bottom">下（#bottom）</div></body></html>
图2
幸福不是因为你拥有得多，而是由于你计较得少。
