流式布局（Fluid Grid Layout）​

流式布局（Fluid Grid Layout） ​流式布局是一种基于百分比而非固定像素的布局方式，它使网页元素能够根据父容器或视口的大小自动伸缩，从而实现更自然的自适应效果。

核心原理 ​传统布局中通常使用固定像素（px）来设定元素宽度，而流式布局使用相对单位（如 %、em、rem），使得元素能够根据浏览器窗口的变化自动调整尺寸。

基本示例 ​html

width: 100%;

max-width: 1200px;

margin: 0 auto;

}

.column {

float: left;

width: 50%; /* 使用百分比代替固定像素 */

padding: 1em;

box-sizing: border-box;

}与响应式布局配合使用 ​流式布局可以与媒体查询配合，实现更细致的自适应：

css.column {

width: 100%;

}

@media (min-width: 768px) {

.column {

width: 50%;

}

}使用相对单位的优势 ​页面能根据不同分辨率自然拉伸或压缩更适合多语言、多尺寸文本的展示更好地适配大部分现代设备注意事项 ​需要配合 box-sizing: border-box 来控制元素实际尺寸百分比布局可能会受嵌套结构影响，需要合理安排父子关系和图片、媒体元素自适应配合使用时，需设置 max-width: 100%总结 ​流式布局提供了一种简单高效的方式，使页面在不依赖 JavaScript 的情况下也能进行基础自适应，是响应式与自适应设计的底层构建方式之一。