1、代码是：<!DOCTYPE html><html>挢旗扦渌;<head><meta ch锾攒揉敫arset="utf-8"></head><body><div id="container" style="width:365px"><div id="header" style="background-color:green;"><h1 style="margin-bottom:0;"><big><big><big>标题</big></big></big></h1></div><div id="menu" style="background-color:#FFD700;height:100px;width:80px;float:left;"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</div><div id="content" style="background-color:#EEEEEE;height:100px;width:200px;float:left;">内容</div><div id="footer"style="background-color:#FFA500;clear:both;text-align:center;">哈哈哈</div></div></body></html>布局效果见下图。
3、把内层所有的区块删掉，只保留最外层区块（粗体部分）：<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><div id="container" style="width:365px"></div></body></html>id="container"表示这个区块是一个容器；style="width:365px"表示容器的宽度是365个像素，高度不限。由于没有内容，所以在网页里面看不到任何内容。
5、再加入一个菜单区块：<div id="menu" style="background-color:pink;height:100px;width:80px;float:left;"><b>菜单</b><br>A<br>B<br>C</div>其中：id="menu"表示这是一个菜单；style="background-color:pink;"表示背景色是粉色；height:100px;width:80px;表示区块高100像素，宽80像素；float:left;表示这个区块位于容器左侧。
7、正文区块，用来输入文字内容：<div id="content" style="background-color:orange;height:80px;width:200px;float:left;"><b>内容</b></div>注意：这个区块没有指定位置，所以，它会紧贴上一个模块，且顶端持平。
9、当某个区块的宽度大于容器的宽度，容器只能纵容它。
