CSS | 布局模型

导读

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

留着以后补充….