# 几种常见的布局方式
1. 几种常见布局方式：流布局/浮动/定位/flex/grid
2. 实际使用
### 普通流
>如果你未曾应用任何CSS规则来改变它们的展现方式，网页上的元素将会按照正常布局流来组织。
[参考：正常布局流](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow)
### 浮动
>浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。[参考官方说明](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats)
### 定位
>定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。[参考官方说明](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Positioning)
### flex 只能处理一行或者一列
>Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
[写给自己看的display: flex布局教程](https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/)
### grid 多行多列
>通过设置CSS属性 display: grid; 可以定义一个 CSS 网格。接着可以使用 grid-template-rows 和 grid-template-columns 属性定义网格的列属性(columns)和行属性(rows)。
[写给自己看的display: grid布局教程](https://www.zhangxinxu.com/wordpress/2018/11/display-grid-css-css3/)
