个人没事做做百度IFE上的前端任务 task3布局资料总结

关于 掌握HTML/CSS布局的概念
掌握盒模型的概念
掌握position与float的概念以及在布局时的用法

position：
static: 元素处于正常文档流中，它当前的布局位置 top right left bottom 和 z-index均无效
relative：相对定位，未脱离文档流，此元素会在原来的位置上留下空白 对table-*-group, table-row, table-column, table-cell, table-caption无效
absolute：绝对定位，不为元素预留空间，脱离文档流 。元素位置通过指定其与它最近的非static定位的祖先元素的偏移来确定。并且可以设置外边距，并且 不会与其他边距合并。

fixed：固定定位，不为元素预留空间，脱离文档流
。通过指定屏幕视窗的位置来指定元素的空间。滚屏时位置不会发生变化。fixed属性通常会创建新的栈环境。

清除浮动
overflow：auto; 是最简单的一种方式。但是有时候在IE下有bug。
zoom：1; 是解决IE浏览器下haslayout的hack写法。加上“*zoom”属性来触发父元素的hasLayout的机制。决定了元素怎样渲染内容，以及元素与元素之间的相互影响。
清除浮动深入：http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best
参考资料
MDN：position：了解 CSS position 属性的基本知识
MDN：float：了解 CSS float 属性的基本知识
Learn CSS Positioning in Ten Steps：通过具体的例子熟悉 position 属性
清除浮动（clearfix hack）：清除浮动是什么，如何简单地清除浮动
StackOverflow：Which method of ‘clearfix’ is best?：清除浮动黑科技完整解读