css布局方式

正常布局流（Normal Flow Layout）
正常布局流是网页中默认的布局方式，也称为文档流。
是网页元素按照默认的排列顺序依次排列的布局方式，每个元素的位置由前一个元素决定，不需要使用css进行特殊的定位和布局。

盒模型布局（Box Model Layout）
盒模型布局是CSS中最基础和最常用的布局方式，通过设置元素的display、width、height、margin、padding、border等属性，来控制元素的大小和位置。
盒模型布局具有灵活性强、易于控制的特点，常用于构建页面的基础布局结构。

弹性盒子（Flexbox Layout）
弹性布局是通过设置元素的display:flex属性，来实现元素在水平和垂直方向上的自适应布局。弹性布局具有灵活性强、适应性好的特点，常用于构建响应式布局和自适应布局。

网格布局（Grid Layout）
网格布局是通过设置元素的display:grid属性，来实现元素在二维网格中的布局。
网格布局具有灵活性强、可扩展性好的特点，可以实现复杂的布局结构和自适应调整。

浮动布局（Float Layout）
浮动布局是通过设置元素的float属性，使其脱离正常布局流，并根据浮动方向排列在页面中。
浮动布局常用于构建多列布局、图文混排等场景。需要注意的是，浮动布局会影响元素的高度计算和文本环绕等特性，需要谨慎使用。

定位布局（Positioning Layout）
定位布局是通过设置元素的position、top、left、right、bottom等属性，来实现元素在页面中的精确定位。

多列布局（Multiple Column Layout）
是一种基于CSS多列属性的布局方式，可以将网页内容按照多栏的方式排列，从而实现不同于传统单列布局的排版效果。