HTML网页布局和定位

网页布局两种方式:
    浮动布局    定位布局
    1.浮动布局:
        float:left right none;
        注意:
            ①设置浮动之后 元素会脱离文档流 "飘"起来
            ②块级元素设置浮动 失去独占一行的特性 
            ③浮动元素会受“父级”元素的挤压 可能挤到下一行去  大盒子包小盒子
            ④自动扩展大盒子高度
                盒子塌陷: 大盒子不设置高度 小盒子又全部浮动 大盒子合并一线
                解决:使用伪元素选择器在大盒子后面添加一个清除了浮动的元素
                #main::after{
                    content: "";
                    display: block;
                    clear: both;
                }
        作用:
            使用浮动来做网页的整体大布局 
            大盒子包小盒子 小盒子设置浮动 谨防塌陷 
            位置在使用margin进行调整
            
    2.定位布局:
        position:static absolute relative fixed;
        
        绝对定位:
            设置绝对定位会脱离文档流