CSS布局的各种方式，分为以下5种，总结了一些步骤及优缺点：
1.浮动布局
浮动布局的第一步：将要浮动的<div>内容调到主内容的上方；
第二布：CSS中，在浮动内容的<div>中加入： float：left / right ; （此处的left和right表示浮动的div在左栏浮动或者右栏浮动；）
浮动布局的特点：文本内容会围绕浮动div显示，若有重叠现象，用Clear消除。
浮动布局的缺点：必须把需要浮动的整个<div>移到页面内容之上；
使用float时，将无法创建两个高度相同的列。
2.冻结布局
冻结布局的第一步：在HTML中设置一个包含所有body元素的<div> ，例：<body>
<div id="allcontainer">
........
</div>
</body>
第二步：在CSS中，设置这个大<div>的宽度width属性，width是需要设置一个确定的数值，目的是将body中的所有内容锁在这个大<div>中动态不得。
冻结布局的特点：无论页面大小如何改变，此区域大小不变位置不变；
冻结布局的缺点：因为位置和大小是确定的导致页面整体效果不美观。
3.凝胶布局
凝胶布局是冻结和流体之间的状态，它是冻结布局的延伸，要有冻结布局的前提加一步变成凝胶布局：
在冻结布局基础上加一步：在CSS中，在大<div>，及例子中的allcontainer的CSS中加入：margin-left / margin-right ; 也就是更加页面的大小左右各留边距。
凝胶布局的特点：由一个固定大小的div包围页面的所有内容，然后利用auto属性值允许外边距扩展；
缺点：页面不会扩张来填充整个浏览器窗口。
4.绝对布局
绝对布局的总一步：在设置确定位置的div中的CSS中加入{
position : absolute ; // 定义绝对布局
bottom / top : .....px ; // 表示此div到页面上或下的距离，从而确定位置
right / left : ....px; // 表示此div到页面左或右的距离，从而确定位置
width : ....px; // 表示div的确定宽度
}
绝对布局的特点：将边栏设置为一个特定的宽度，并将它定为在主内容的一边，这个边栏会一直保持固定的大小和固定的位置。
缺点：浏览器变宽时，边栏会再次覆盖页脚，而且不能使用clear消除。
5.表格显示布局
完成表格显示布局的第一步：若有两个<div>放进表格里，分别为<div>1 和<div>2，以下格式：
<div id="table">
<div id="row">
<div id="1">
</div>
<div id="2">
</div>
</div>
</div>
第二步：在CSS中加入规则：
#table { display : table ; }
#row { display : table - row ; }
#1,2 { display : table - cell }