三大布局：标准文档流、浮动布局、定位布局
标准文档流（flow）
块级元素（block）：从左到右撑满页面，独占行，从上到下
内联元素、或行级元素（inline）：行内显示，从左到右
块级内联元素（inline-block）：行内，但可以像块级元素一样编辑高度、宽度、行高以及顶和底边距
注：块级元素和行级元素都是盒子模型
浮动布局（float）
设置了浮动的元素，仍旧处于标准文档流中
左浮动、右浮动，对紧邻后面的元素有影响
清除浮动：
- clear：both(left、right）
- 同时设置：width:100%（或固定宽度）+ overflow：hidden
定位布局（position）
三种定位方式：静态定位、相对定位、绝对定位
四个属性值：static、relative、absolute、fixed
相对定位(relative)
相对于自身位置进行偏移(原先位置仍然存在，对兄弟模块有影响，占了位置)、仍处于标准文档流中、随即拥有偏移属性和Z-index属性
绝对定位（absolute）
（1）建立了以包含块为基准的定位、完全脱离了标准文档流（对兄弟模块无影响）、随即拥有偏移属性和Z-index属性
（2）未设置偏移量：无论是否存在已定位祖先元素，都保持在元素初始位置。
（3）设置了偏移量：a.无已定位祖先元素，以为偏移参考基准；b.有已定位祖先元素，以距其最近的已定位祖先元素为偏移参考基准。
绝对定位（fixed）
(1) 与absolute定位类型类似，完全脱离了标准文档流（对兄弟模块无影响），但它的相对移动的坐标是视图（屏幕内的网页窗口）本身
(2) 未设置偏移量时，有已定位祖先元素，以祖先元素为基准定位；无已定位元素，以浏览器窗口为基准定位；
(3) 设置偏移量时，有、无已定位祖先元素，都以浏览器可视窗口为基准偏移；
注意：上面设置偏移量的时候，可以根据需求设置，只设置top，只有top方向才会跟已定位的祖先元素偏移，left是不会相对已定位的祖先偏移的
不过遇到一个问题一直想不明白，两个盒子box1、box2，box1在box2之前，并列关系，box1设置fixed之后，box2设置margin-top为50px，结果box1也跟着下来50px了？？？？