五中常规的网页布局方式

1. 自然布局，又称流动布局或者流体布局。
   网页中的元素按默认的static的方式定位，遵循标准文档流。按默认方式不加任何修饰，内容自动靠左。主体部分宽度采用百分比，所以能很好的适应用户的分辨率。（注：通常在你想要覆盖父级的定位方式时才申明定位方式为static）。默认为从上到下，从左到右，遇到块级换行。
2. 固定布局。
   固定布局就是采用固定的宽和高的div来布局网站。
3. 浮动布局。float：left；float：right；float：none；
   float：inherit（从父级继承浮动属性）
   浮动的元素脱离的标准文档流，不占位了，它所在的位置会被其他的元素顶上。
   浮动的参照物是父级元素，会在父级的容器中移动。
   div盒子设置浮动后，宽度会由100%变成自适应。
   如果两个元素都设置了浮动，两个元素并不会重叠，第一个元素占据一定的空间，第二个元素跟在其后面。
4. 定位布局
   position：fixed 固定定位，参照物是整个文档，通常用于固定导航，固定信息框等。
   position：relative 相对定位，是以自身为参照的移动、移动后依旧占位原本的位置。（不会改变元素的display的属性值）
   position：absolute 绝对定位，绝对定位是相对而言的。设置绝对定位的元素会以其父级设置了定位的元素（absolute或者relative）为参考进行定位，如果没有则以body为参考。同时会脱离标准文档流，并且改变display的属性。
   块级元素在position为relative或者static时，宽度为100%，在absolute时宽度变为自适应内容本身。
   设置position：absolute后，如果没有给left，top，bottom，right时。则以元素默认的位置。
   设置了position：absolute|relative后，margin属性仍然有效，建议不要使用margin，使用left、right、top、bottom。减少干扰因素。
   position：absolute会忽略根元素的padding值。
   position：absolute会改变行元素的display属性值，不用设置为block。
   在IE6和7下，设置position属性后，z-index会失效。
   设置position：absolute|relative后会覆盖static的默认位置的元素。可以设置z-index为-1.
5. table表格布局
   在div+css的盒模型时代，这个以table表格布局的方式则不用了