浮动布局、伸缩盒布局、定位布局

浮动布局（y轴）

    float:left

    浮动元素：

        1.脱离文档流

        2.块元素的宽度不再是100%，由内容决定

        3.块元素不再支撑其父元素

        4.同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候发          生换行。

clear 清理浮动

clear:left

不与左浮动元素在同一水平线上

clear:right

不与右浮动元素在同一水平线上

伸缩盒布局（x轴）

概念

        1.伸缩盒容器

        2.伸缩盒元素

        主轴 默认主轴为x轴，伸缩盒中，伸缩盒子元素沿着主轴来进行排列

        交叉轴        与主轴垂直的轴

规则

        伸缩盒容器

               

 display:flex; 

                强制让他的在元素沿着主轴方向中显示，并且子元素不会脱离，交叉轴上元素的高度 如果没有指定，应该和父元素保持一致

fle-direction:row;

                定义主轴方向，row表示主轴是x轴 column表示主轴为y轴

felx-wrap:nowrap

当子元素长度甲起来超过主轴上的父元素的高度时，默认不换行

 align-items: ;

    定义伸缩盒容器中的子元素在交叉轴上的排列方式  

 justify-content: ;

      定位仪伸缩盒容器中的子元素在主轴上的排列方式 

伸缩盒元素

flex-basis: 100px;

主轴上的基础长度

 flex-grow: 1

主轴上剩余空间的分配份数

flex-shrink: 1

主轴上亏损空间的分摊

定位布局（z轴）

非定位元素

position:static

定位元素：可以使用定位属性，top right bottom left

position:relative

不脱离文档流；相对于自身原来所在位置来进行定位

position:absolute;

脱离文档流；相对于距离他最近的父定位元素来进行定位

position:fixer;

脱离文档流：相对于浏览器视口来进行定位

position:sticky;

在没有达到阈值前不脱离文档流（相对定位），达到阈值后脱离文档流（固定定位）

应用场景

        特殊场景布局：二级栏目、广告

        实现块元素的居中

                left/margin-left