網頁佈局兩種方式:     浮動佈局    定位佈局    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 下邊的位置