CSS流式布局是一種為不同分辨率設備而設計的響應式布局，它具有靈活性，可以自動適應設備屏幕的大小和方向，以最佳方式呈現網站。此設計方法的基本原理是使用相對尺寸單位（如百分比），而不是使用固定像素，使網頁元素自適應容器大小。流式布局使設計者能夠在不同的分辨率上更好地控制網站的布局

body {
width: 90%;
margin: 0 auto;
font-size: 1em;
line-height: 1.5;
background: #fff;
font-family: Arial, Helvetica, sans-serif;
}
header {
width: 100%;
text-align: center;
background: #f2f2f2;
padding: 20px 0;
}
nav {
width: 100%;
height: auto;
overflow: hidden;
background: #333;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
color: #fff;
text-decoration: none;
}
section {
width: 100%;
height: auto;
overflow: hidden;
padding: 40px 0;
}
section h2 {
text-align: center;
margin-top: 0;
}
.box {
width: 25%;
float: left;
padding: 20px;
box-sizing: border-box;
}
footer {
width: 100%;
height: auto;
overflow: hidden;
padding: 20px;
text-align: center;
background: #f2f2f2;
}

你可以看到在示例代碼中，所有尺寸都使用相對單位，而不是像素，這使得它可以適用于多個分辨率設備，例如臺式機，筆記本電腦，平板電腦和手機。在這里，我們也使用浮動（float）屬性來處理元素的位置和布局

總的來說，CSS流式布局提供了一個更靈活和響應性的方法，可以為不同用戶提供更好的用戶體驗，這使得更多用戶可以方便地使用和訪問網站