布局方式太多,详见这篇文章

1：圣杯布局
2：双飞翼
3：flex

圣杯布局，双飞翼布局，绝对布局，flex弹性布局

• flex
• float
• grid 栅格化
• position
• column 瀑布流

• 流式布局: 最基本的布局，就是顺着 html 像流水一样流下来
• 绝对定位: 利用 position: absolute 进行绝对定位的布局
• float 布局: 最初用来解决多栏布局的问题。比如圣杯、双飞燕的布局都可以用 float 来实现
• 珊格布局: bootstrap 用的布局，把页面分为 24 分，通过 row 和 col 进行布局
• flex 布局: css3 的布局可以非常灵活地进行布局和排版
• grid 布局: 网格布局

float浮动，position定位，flex弹性，栅格（分为24份），流式布局（顺着html像流水一样流下来）

• 浮动 float ；清除浮动 clear 属性
• 块级格式化上下文 BFC ： 给其 overflow 属性设置为 visible 之外的值
• 定位 position ： 相对定位 relative；绝对定位 absolute；固定定位 fixed；粘性定位 sticky
• Flex 布局： display: flex;
• Grid 布局：display: grid;
• 对齐方式：align-items , justify-items , ……

https://www.w3cplus.com/css/guide-css-layout.html

• 基本的流式布局
• 浮动
• 定位

css3:

• flex
• grid

• 普通的流式布局
• float流
• 绝对定位流
• flex
• grid

常见布局

flex一把梭

普通的流式布局
float流
绝对定位流
flex
grid

flex布局
流式布局
浮动布局
双飞翼布局
圣杯布局

栅格
flex
双飞翼
圣杯
（这类并排的三栏布局可以说是：固比固；延申开来就会有：固固固，比比比等等）

传统盒模型布局方式

通过盒模型，使用 display 属性（文档流布局） + position 属性（定位布局） + float属性（浮动布局)进行布局

文档流布局

按照文档顺序一个一个显示出来，块元素独占一行，行内元素共享一行

浮动布局

使用float属性，是元素脱离文档流，浮动起来

定位布局

使用position属性对元素进行定位

flex（弹性）布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

将元素的display属性设为flex，Webkit 内核的浏览器，必须加上 -webkit 前缀

.ele{
    display: -webkit-flex;
    display: flex;
    display: inline-flex;
    display: -webkit-inline-flex;
}

注：当元素设置了 Flex ，子元素的 float、clear 和 vertical-align 属性将失效

grid（网格）布局

grid 布局又称为“网格布局”，可以实现二维布局方式，和之前的 表格table布局差不多

这是使用 CSS 控制的，不是使用 HTML 控制的，同时还可以依赖于媒体查询根据不同的上下文得新定义布局

将元素的display属性设为 grid 或 inline-grid 或者是 subgrid（该元素父元素为网格，继承父元素的行和列的大小）

注：当元素设置了网格布局，column、float、clear、vertical-align属性无效

float布局，flex一把梭，圣杯和双飞翼

flex弹性布局，grid布局，绝对定位布局，float布局，表格布局

flex布局 双飞翼布局 圣杯布局 gird 瀑布流