CSS 布局的三种机制

一、标准流

块级元素

• 独占一行，从上到下排列
• 默认宽度同父元素
  div、hr、p、h、ul、ol、dl、form、table等

行内元素

• 一行内显示，超出自动换行
  span、a、i、em等

二、浮动

• 任何元素都可以添加，变为块级元素（相当于行内块）
• 脱离标准流，到指定位置
• 漂浮在普通流的上面
• 添加浮动属性，元素不占位置

多个盒子处于一行处理

• 行内块属性
  默认有缝隙，难以处理
• 浮动完美解决

属性

• none
• left
• right

注：一般为了避免和标准流影响，浮动元素必须有一个标准流的父亲规范

与父盒子

• 贴着盒子的内边框
• 不会超过盒子的内边距

与兄弟盒子

• 浮动的元素只会影响当前的或者后面的标准流盒子，不影响前面的标准流
• 建议兄弟盒子都浮动，方便处理

清除浮动

• 很多情况下父元素不方便给高度，子元素浮动后不占位置，导致父盒子无高度，影响整个页面布局
• 清除浮动，父盒子自动获取子元素最大的高度
• clear
  属性left、right、both（常用）
  a> 额外标签法
  浮动元素末尾添加空标签，并为该标签添加属性clear: both;
  注：W3C推荐，通俗易懂，但无意义
  b> 父级添加overflow
overflow属性设为hidden|auto|scroll
  注：内容增多时不会自动换行导致内容被隐藏，无法显示需要溢出的元素
  c> 使用after伪元素
  .clearfix:after { content:""; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {*zoom:1;} /IE6、7专有/
  d> 双伪元素

.clearfix:before,
.clearfix:after {
  content:"";
  display: table;
}
.clearfix:after {
  clear:both;
}
.clearfix {
  *zoom:1;
}

三、定位

• 定位 = 定位模式 + 边偏移
• 边偏移
  top、bottom、left、right
• 定位模式 position
static、relative、absolute、fixed，默认静态定位

静态定位

• 默认定位方式
• 按照标准流特性摆放，无偏移

相对定位

• 相对于原来自身在标准流中的位置偏移
• 保留原来标准流中的位置

绝对定位

• 以带有定位的父级元素来移动位置（父元素无定位时，以浏览器为基准）
• 完全脱离标准流，不占位置
• 子绝父相 （子级绝对定位，父级相对定位）

固定定位

• 绝对定位的特殊形式，以浏览器可视窗口为基准

定位拓展

• margin auto在绝对定位|固定定位中无效，水平居中写法
  左移父级的一半，再返回自身的一半

.abs {
          position: relative;
}
 .abs .son {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            margin-left: -100px;
        }

• 在相对、绝对、固定定位中，z-index 调整堆叠顺序，默认0，赋值正整数或负整数，在其他流中无效
• float、固定定位和绝对定位，造成inline-block效果
• 浮动、绝对定位不会造成外边距合并