传统布局三种方式

1.标准流（普通流和文档流）

所谓的标准流：就是标签按照规定好默认方式排列

1、块级元素会独占一行，就是从长向下顺序排列

2、行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

2.浮动（float）

浮动最典型的应用：可以让多个块级元素一行内排列显示

float: none;元素不浮动

float: left;向左浮动

float: right;向右浮动

打设置了浮动float的元素最重要的特性

1.脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）

        浮动的盒子不再保留原先的位置

2.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

3、浮动元素会具有行内块元素特性

      任何元素都可以浮动，不管原先是什么 模式的元素，添加浮动之后具有行内块元素 相似的特性

         如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它大小根据   内容  决定

    浮动的盒子中间没有缝隙，是紧挨着一起的

    行内块元素同理

3.定位

将盒子定在某个位置

定位=定位模式+边偏移（top bottom left right）

1.static 静态定位（无定位，默认）

2.relative 相对定位（

相对它原来位置（自恋性）），保留它原来位置（继续占有,停职留薪）

给绝对定位当爹

3.absolute 绝对定位

         元素在移动位置是相对于祖先元素的（拼爹型）

 如果没有祖先元素或者祖先没定位，则以浏览器为准

         以最近一级的有定位祖先元素为参考点

         不占有原来位置

4.fixed 固定定位

固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

特点：

         跟父元素没有任何关系（以浏览器为参考点）

         不随滚动条滚动

         固定定位不在占有原先的位置

         固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

         拓展：

      Sticky粘性定位:可以被认为是相对定位和固定定位的混合

      选择器{position:sticky;top:10px}

       特性：

               1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

               2.粘性定位占有原先的位置（相对定位特点）

               3.必须添加top,left,right,bottom其实一个才有效

      缺点：

              兼容性比较差

              IE不支持

注：子绝父相