标准文档流（Normal flow）
•特点( 块级元素和行级元素都是盒子模型 ) ➢ 从上到下，从左到右，输出文档内容 ➢ 由块级元素和行级元素组成
块级元素(eg: div、ul、li、dl、dt、p) • 特点 ➢ 从左到右撑满页面，独占一行 ➢ 触碰到页面边缘时，会自动换行
行级元素( eg:span、strong、img、input) • 特点 ➢ 能在同一行内显示 ➢ 不会改变HTML文档结构
➢ 边框（border） ➢ 外边距（margin） ➢ 内边距（padding） ➢ 盒子中的内容（content）
…浮动（Floats）
•能够实现横向多列布局（横向两列、横向三列…横向N列） • 通过设置float属性实现 • 3个属性值 ➢ left—左浮动 ➢ right—右浮动 ➢ none—不浮动 • 特点：元素会左移，或右移，直至触碰到容器为止 . 设置了浮动的元素，仍旧处于标准文档流中
• 对紧邻其后元素的影响 ➢ 相邻元素上移，占据其后位置 ➢ 紧挨着它，并排显示
•常见问题 ➢父元素高度无法自动扩展 ➢ 元素上移，填满浮动元素右侧（或中间）的间隙 ( 浮动元素对相邻元素的影响，会导致页面布局混乱 )
•清除浮动的常用方法 ➢ clear属性—常用clear:both; ➢ 同时设置width:100%(或固定宽度)+overflow:hidden;
绝对定位（Absolute positioning）
•能够实现横向多列布局及较为复杂的定位 • 通过设置position属性实现 •可设置4个属性值 ➢ static（静态定位） ➢ relative（相对定位） ➢ absolute（绝对定位） ➢ fixed（固定定位）
•1.静态定位•2.相对定位 •特点 ➢ 相对于自身原有位置进行偏移 ➢ 仍处于标准文档流中 ➢ 随即拥有偏移属性和z-index属性
•3.绝对定位 absolute及fixed都属于绝对定位 •特点 ➢ 建立了以包含块为基准的定位 ➢ 完全脱离了标准文档流 ➢ 随即拥有偏移属性和z-index属性
未设置偏移量 特点 1.无论是否存在是否已定位的祖先元素，都保持在元素的初始位置 2.脱离标准文档流
设置偏移量
无已定位祖先元素，以html为偏移参照基准 无已定位祖先元素， 以其最近的已定位祖先元素为偏移参照基准