導讀

整理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)

網格佈局(grid)

留著以後補充….