传统布局
传统的网页布局解决方案，是基于 盒状模型（div） + float属性 + display属性 + position属性。
优点
兼容性好，在 PC端各种浏览器 广泛应用
缺点
布局繁琐，
div默认独占一行，在一行显示多个div，要大量设置float浮动，比较麻烦对于 特殊布局 非常不方便，比如，垂直居中 就不容易实现
在 移动端（小屏幕设备，如：手机）不能很好的布局
解决
使用flex弹性布局
flex布局
历史
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持
介绍
Flex是Flexible Box的缩写，意为 弹性布局，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex布局
flex布局的别名
flex布局有很多别名，如：弹性布局、伸缩布局 等多个别名
优点
- 操作简单、布局简单
- 在 移动端（小屏幕设备，如：手机） 应用广泛
缺点
- 低版本浏览器不支持（目前主流浏览器几乎都支持）
- 在 PC端应用不多
相关概念
flex容器：采用 flex布局的 父元素
容器成员：flex容器的所有子元素
布局原理
通过给父元素设置 flex 属性，控制子元素的位置、排列方式
display: flex;
失效的样式
当为 父元素 设置 flex 布局后，子元素 的 float、clear、vertical-align 属性失效
因为：flex布局默认 子元素是 水平显示
参考：
https://www.runoob.com/w3cnote/flex-grammar.html
https://www.bilibili.com/video/BV1N54y1i7dG/?p=3&spm_id_from=pageDriver&vd_source=53fbcfb9e923d43b8f4486c11d188f20