HTML网页布局和定位

网页布局两种方式:
    浮动布局    定位布局
    1.浮动布局:
        float:left right none;
        注意:
            ①设置浮动之后 元素会脱离文档流 "飘"起来
            ②块级元素设置浮动 失去独占一行的特性 
            ③浮动元素会受“父级”元素的挤压 可能挤到下一行去  大盒子包小盒子
            ④自动扩展大盒子高度
                盒子塌陷: 大盒子不设置高度 小盒子又全部浮动 大盒子合并一线
                解决:使用伪元素选择器在大盒子后面添加一个清除了浮动的元素
                #main::after{
                    content: "";
                    display: block;
                    clear: both;
                }
        作用:
            使用浮动来做网页的整体大布局 
            大盒子包小盒子 小盒子设置浮动 谨防塌陷 
            位置在使用margin进行调整
            
    2.定位布局:
        position:static absolute relative fixed;
        
        绝对定位:
            设置绝对定位会脱离文档流
            绝对定位和浮动不能一起使用 
            元素全部停留在父级元素的左上角 (重叠)
            z-index:调整谁在上方 越大越靠上
            调整位置:
                left： 针对body 左边的位置
                top:   针对body 上边的位置
                right: 针对body 右边的位置
                bottom:针对body 下边的位置
            
            如果希望针对的位置是父级元素 给父级元素添加一个定位属性(relative)
            
        相对定位:
            相对定位不脱离文档可以和浮动一起使用
            调整位置:
                left： 针对元素当前自身的位置 左边的位置
                top:   针对元素当前自身的位置 上边的位置
                right: 针对元素当前自身的位置 右边的位置
                bottom:针对元素当前自身的位置 下边的位置
        
            子绝父相:  子元素设置绝对定位 父元素相对定位 top/left 参照物变成父元素
        
        应用:局部布局上  
        
        固定定位:
            固定在某个位置保持不变 比跟随滚动条的拖动而发生改变
            调整位置:
                left： 针对body 左边的位置
                top:   针对body 上边的位置
                right: 针对body 右边的位置
                bottom:针对body 下边的位置