版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/Uching/article/details/77645549
導讀
整理5種CSS佈局模型：flow,float,position,flex,grid
流動佈局(flow)
default，對於一個HTML網頁，body元素下的任意元素，根據其先後順序，組成了一個個上下關係。塊狀元素佔據一行，內聯元素從左到右排列。
栗子：流式佈局
<div style="width: 100px;height:100px;border: solid 2px #5F9EA0;"></div>
<div style="width: 100px;height:100px;border: solid 2px #DEB887;"></div>
浮動佈局(float)
浮動
栗子：向左浮動，同理你可以向右浮動，一左一右浮動…
<div style="float: left;width: 100px;height:100px;border: solid 2px #5F9EA0;"></div>
<div style="float: left;width: 100px;height:100px;border: solid 2px #DEB887;"></div>
應用栗子：二列右列寬度自適應
<div style="float: left;width: 100px;height:100px;border: solid 2px #5F9EA0;"></div>
<div style="float: left;width: calc(100% - 108px);height: 100px;border: solid 2px #DEB887;"></div>
浮動框不在文檔的普通流中，不佔據文檔流的位置。因此向左浮動那個栗子中的第二個div，如果在文檔流中（即沒有float:left），那麼會被第一個div遮住。你可以暫且叫它浮動層。
清除浮動
應用栗子：向左浮動了幾個元素之後，突然發現，有一個不想浮動啊，那麼在這個傲嬌的不想浮動的元素里加上↓，拒絕向左浮動
clear: left應用栗子：當你浮動了很多很多個元素之後，突然需要另起一行，那就加一個帶有clear:both屬性的空div標籤來設置該div左右都拒絕浮動。這樣，在這個div之後的任意元素，都可看做與此div元素智商的對象相分離，不會受到上面的對象的浮動所影響，從而起到了消除浮動影響的作用。
<div style="clear:both;">
<br>
</div>層次佈局(position)
層次佈局將框從文件流中拖出來
position: absolute;
相對其最接近的一個具有定位屬性的父包含塊進行定位
<div style="position: absolute;top: 50px;left: 50px;width: 100px;height:100px;border: solid 2px #5F9EA0;"></div>position: relative;
相對其以前的位置移動
<div style="position: relative;top: 50px;left: 50px;width: 100px;height:100px;border: solid 2px #5F9EA0;"></div>position: fixed;
相對視圖（屏幕中的窗口）移動，不隨滾動條而動
栗子：購物商場右下角的購物車圖標
<div style="position: fixed;bottom: 180px;right: 50px;width: 100px;height:100px;border: solid 4px #5F9EA0;"></div>彈性盒佈局(flex)
可以看回以前翻譯過的一篇關於flex佈局的文章
CSS佈局 | Flexbox的理解與使用
網格佈局(grid)
留着以後補充….