Css各种布局方式

1. 文档流布局（Normal Flow）：

           1）元素按照HTML文档中的顺序排列；
2. 块级元素独占一行，行内元素在同一行内显示。这是浏览器默认的布局行为。​​​​​​

3. 浮动布局（Floats）： 通过设置元素的float属性（如left或right），可以让元素脱离正常的文档流，浮动到一侧，从而实现多栏布局等效果。这种方式在过去被广泛使用，但随着Flex和Grid布局的普及，其使用频率已减少。

4. 定位布局（Positioning）： 利用position属性（如relative、absolute、fixed、sticky），可以精确控制元素在页面上的位置。绝对定位(absolute)和固定定位(fixed)使元素完全脱离文档流，而相对定位(relative)和粘性定位(sticky)则是相对于元素原本在文档流中的位置进行偏移。

5. Flex布局（Flexbox）： 弹性盒子模型，使用display: flex;或display: inline-flex;定义容器，能够简便地实现一维布局，即在一个轴上（横向或纵向）自动调整元素的大小和排列。Flex布局非常适合构建动态响应式的界面，特别是在需要元素等宽或等高，或者需要填充剩余空间时。

6. Grid布局（CSS Grid Layout）： 二维布局系统，通过display: grid;定义容器，可以同时控制元素在行和列上的布局，非常适合创建复杂的网格布局，如多列布局、卡片布局等。Grid布局特别适合那些需要严格控制元素在页面上位置和大小的设计。

7. 表格布局（Table Layout）： 使用HTML的<table>、<tr>、<td>等标签，或者通过CSS的display: table-*;系列属性，模仿表格的布局方式。尽管表格布局主要用于展示表格数据，但也可以被创造性地用于页面布局，尽管这并不是其推荐用途。

8. 多列布局（Multi-column Layout）： 通过column-count、column-width等属性，可以在一个元素内部创建多列，适用于杂志风格的布局或者长文本内容的分栏显示。