布局的常用方法有幾下幾種
一，float布局
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。
浮動元素會生成一個塊級框，而不論它本身是何種元素。
屬性值：
float:left 元素向左浮動。
float:reght 元素向右浮動。
float:none 默認值。元素不浮動，並會顯示在其在文本中出現的位置。
float:inherit 規定應該從父元素繼承 float 屬性的值。
float案例：
<div style="width:100px; height: 40px; background-color: black;float: right;"> </div> <div style="width:100px; height: 40px; background-color: #FF0000;float: left;"> </div> <div style=" width: 100px; background-color: #0000FF; height: 40px; float: left;"> </div>
效果：（如果不用浮動div塊將會一次垂直往下排列）浮動后的塊元素可以用magin或pading來留白修飾來使其美觀。
二、absolute布局
absolute譯為絕對的，absolute是postion屬性一個屬性值。當一個元素使用絕對定位時，這個元素將不受頁面的布局影響
可以根據自己的需求來改變其位置，來完成一些不規則的頁面布局：
屬性值：
postion：absolute 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
postion：fixed 生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
postion：relative 生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
postion：static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
postion：inherit 規定應該從父元素繼承 position 屬性的值。
absolute 中有一個值的注意的地方 相對於 static 定位以外的第一個父元素進行定位 在使用絕對定位時要注意他父元素數的定位，假若對父元素沒有要求
可以給父元素設置一個相對定位relative。對於新手來說，定位之間的切換，父級和下一級之間的關系常常擾亂我們（我就是這樣）所以要勤加練習更好的
掌握 。
absolute 案例：
<style type="text/css"> .div1{ width: 100px; height: 40px; background-color: #FF0000; position: absolute; top: 20px; left: 30px; } .div2{ width: 100px; height: 40px; background-color: #0000FF; } </style> </head> <body> <div class="div1"> </div> <div class="div2"> </div> <div class="div3"> </div> </body>
效果：（使用絕對定位將紅色塊定位到距離上邊框20px左邊框30px）如果想讓藍色的div塊在上面，可以用在藍色樣式加絕對定位用z-index:1來設置
三、flex彈性布局
彈性布局東西太多不寫了直接看別人的博客吧我看着蠻好 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
四、table布局 (鏈接：https://blog.csdn.net/Bessicxie/article/details/78572424)
Table布局的缺點是比其它html標記占更多的字節，會阻擋瀏覽器渲染引擎的渲染順序，會影響其內部的某些布局屬性的生效，
優點就是用table做表格是完全正確的
語法：display：table；
屬性：常見 display:table相當於“table”標簽；display:table-row相當於“tr”標簽；display:table-cell相當於“td”標簽；
案例：
五、grid布局（鏈接：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html）
內容來源 作者：_leonlee
鏈接：https://www.jianshu.com/p/d183265a8dad
來源：簡書
作為小白的我還是第一次來了解grid布局，剛剛百度了一下子看了幾篇博文，了解到這是一個非常nb的東西
CSS網格布局（又稱“網格”），是一種二維網格布局系統。CSS在處理網頁布局方面一直做的不是很好。一開始我們用的是table（表格）布局，然后用float(浮動)，position（定位）和inline-block（行內塊）布局，但是這些方法本質上是hack，遺漏了很多功能，例如垂直居中。后來出了 flexbox(盒子布局)，解決了很多布局問題，
好東西總是來的晚，不要焦躁，不要沮喪。活好每一天，自然就等到了。
目前瀏覽器還不支持Grid布局，IE10和IE11支持老的語法。如果你想體驗Grid布局的強大，推薦使用開通過“體驗新功能”的Chrome, Opera 或 Firefox， Chrome:打開瀏覽器，輸入 chrome://flags，找到"experimental web platform features"，啟用並重啟瀏覽器；Opera：輸入 opera://flags，與Chrome一樣；Firefox:輸入layout.css.grid.enabled。
grid-area-name: 網格項的grid-area屬性值（名字）
center： 居中對齊。
stretch：填滿（默認）。