css初步-优快云博客

本文介绍了一个具体的HTML页面布局案例，详细解析了如何使用CSS样式实现不同区块的布局，包括头部、主体、侧边栏及底部等，并解释了浮动属性与clear属性的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <mce:style tpye="text/css"></mce:style><style tpye="text/css" mce_bogus="1">body{text-align:center;} /***********这个是限定主面的居中效果，如果没有，默认在左侧显示*********/ #header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;} #mainbox{margin:auto 0px;width:800px;background:blue;height:410px;} #sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;} /*******上右下左*******/ #menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;} #content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:yellow; padding-left:0px;} #footer{margin-top:0px;width:800px;height:40px;background:#fff000;}</style> </HEAD> <BODY> <div id="header"><FONT SIZE="8" COLOR="#FFFF33">家园中文网站长站演示文档</FONT></div> <div id="mainbox"> <div id="sidebar"> </div> <div id="menu">4323434</div> <div id="content"> <div align="left"><img src="you.jpg" mce_src="you.jpg" alt="家园中文网站长站" width="550" height="361"></div> </div> </div> <div id="footer">这里是foot部分，放置版权啥的</div> </BODY> </HTML>

如果你当前的块级元素向右浮动的，但是你不想这个元素后面的元素紧贴现在的元素就clear:left.反之则用clear:right.我不想让下一个元素和我在一行用clear:both，这个还是要根本实际情况来写，另外和自己的习惯有点关系。

比如你一个盒子 DIV 用了 float:left 那么下面的那个盒子左边受到影响这时候你可以用 clear：left