html布局(position属性)和流

我很早已经在CSDN开了账户，而且看了无数很优秀的文章，下载了很多资源使用，一开始感觉自己是菜鸟，所以一直不敢写文章，今次是第一次写，我觉得凡事都会有第一步，而且以后我看回自己的博文还能看到自己成长的点点滴滴！

我看了1~2个月的前端技术，还是很菜鸟，不过我只是顺便记录一下我的成长，或许这篇博文不太重要，而且很水，不过99%人懂了，或许还有1%的人不懂，能分享就好，我就抱着这心态去学习和分享的，呵呵！！

HTML一共有5种布局,我所说得布局是position的属性:static，relative，absolute，fix，inherit

（1）static布局是默认，假如在这种布局，他是没有定位的，而且不会继承父元素的属性，W3C文档里面还说忽略 top, bottom, left, right 或者 z-index 声明，他是存在于流里面的。

（2）relative布局是相对布局，假如父元素用了这种布局，那么子元素就是相对于父元素的绝对定位，一般配合top,right,bottom,left来使用，这个布局也是存在于流里面的。

（3）fix布局是“浮动布局”，他是相对于浏览器的窗口来浮动的，一般配合top,right,bottom,left来使用，这个布局是脱离了流而存在的。（IE不兼容）

（4）absolute布局是绝对布局，他是相对于浏览器窗口的绝对布局，一般配合top,right,bottom,left来使用，这个布局也是脱离了流而存在的。

（5）inherit布局我比较少用，文档里面他是规定应该从父元素继承 position 属性的值。

好了，大家理解了布局之后，就应该了解“流”是什么东东。打个比喻，就一条小溪流进大海里面一样，小溪就是所谓的流，大海就是我们的浏览器了；html的流是对块状元素是由上到下的垂直分布的，内联元素是水平分布的。所以static，relative布局是遵循流的分布的；而fix，absolute布局则不需要遵循流的分布，是自己定义绝对位置的。相信说道这里大家应该有所明白了。呵呵！简单的东西不用说太多。

所以这2个，还有一个属性一定要介绍的，就是float啦，假如定义了这个属性就是暂时脱离了流而存在，当clear了才回归流中。注意一点的是，在float属性下的盒子模式，IE,FF,Chrome是有所不同的。IE的margin会出现2倍，呵呵！大家可要好好爱护下IE，小点吐槽吧！

假如小弟有什么理解不到位或者是错误的话，欢迎吐槽！