5布局方式2定位布局

• 布局方式

  1. 文档流

  2. 浮动布局
     属性：float
     取值：left/right
     特点：

     1. 浮动元素按照浮动方向依次停靠在前一个元素的边缘，一旦设置浮动，就会脱离文档流，在文档中不占位，可以调整宽高。
     2. "文字"环绕效果:浮动元素不占位，后面正常元素向前占位，被浮动元素遮挡。但是浮动元素只会遮挡元素位置，不影响元素内容的显示，内容会围绕浮动元素周围显示。
     3. 浮动元素如果与行内或行内块元素显示时，见缝插针，允许共行显示

     问题：

     1. 浮动元素不占位，后面正常元素向前占位，影响布局。解决：清除浮动
        属性:clear
        取值:left/right/both
        使用:为正常元素添加clear属性，使其不受前面元素左浮或右浮的影响
     2. 子元素全部浮动，导致父元素高度为0，影响父元素自身背景及边框样式的显示，影响整体布局。
        解决：
        1. 内容确定时，可以给父元素固定高度（导航栏）
        2. 内容不确定时，可以为父元素设置overflow:hidden;(保留浮动元素的高度)
        3. 标准的清除浮动
           在父元素的末尾手动添加空的子元素，设置clear:both;

  3. 定位布局
     属性：position
     取值：relative/absolute/fixed
     使用：

     1. 已定位元素：只有设置position属性，取值为relative/absolute/fixed,才能称为已定位元素
     2. 偏移属性:调整已定位元素显示位置
        top：设置元素与参照物顶部的距离
        left
        right
        bottom
     3. 分类
        1. 相对定位relative
           特点：相对定位的元素不会脱离文档流；参照元素在文档中的原始位置进行偏移
        2. 绝对定位absolute
           特点：绝对定位的元素脱离文档流，不占位；参照离他最近的已定位的祖先元素进行偏移，没有的话，参照浏览器窗口的原点偏移
           使用：父元素相对定位，子元素绝对定位
        3. 固定定位fixed
           特点：固定定位的元素会脱离文档流；参照浏览器窗口进行定位；不跟随页面滚动而滚动
        4. 堆叠次序调整
           1. 已定位的元素与正常的元素发生堆叠,永远是已定位的元素在上方显示
           2. 同为已定位元素发生堆叠,看代码书写顺序，后来者居上
           3. 调整堆叠次序：
              属性：z-index
              取值：无单位的数值，值越大越靠上
              注意：只能调整已定位元素的堆叠次序