在网页布局开发中，流式布局和固定布局各有适用场景，将两者结合使用可以同时满足页面适配性和内容展示稳定性的需求，既能在不同设备上保持良好适配，又能避免核心内容区域过度拉伸影响阅读体验。
两种布局的核心特点
流式布局
流式布局也叫百分比布局，元素宽度使用百分比定义，会随着父容器宽度变化自动调整，适配不同尺寸的屏幕，适合实现整体页面的响应式适配。但全流式布局在宽屏设备上可能导致内容区域过宽，文字行长度过长，降低阅读舒适度。
固定布局
固定布局中元素宽度使用固定像素值定义，不会随视口宽度变化而改变，能稳定控制内容展示效果，适合核心内容区域、侧边栏等需要固定尺寸的场景。但固定布局在窄屏设备上容易出现横向滚动条，适配性较差。
结合使用的常见方案
最典型的结合方案是外层使用流式布局适配整体页面，内层核心内容区域使用固定布局限制最大宽度，同时侧边栏等辅助区域可以根据屏幕尺寸灵活调整。以下通过一个常见的页头、内容区、页脚布局来演示实现方法。
完整代码示例
首先定义基础HTML结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>混合布局示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品服务</a></li>
</ul>
</nav>
</div>
</header>
<main class="main">
<div class="container">
<article class="content">
<h2>主要内容区域</h2>
<p>这里是页面的核心内容，宽度固定为1200px，在宽屏设备上不会过度拉伸，保证阅读体验。</p>
</article>
<aside class="sidebar">
<h3>侧边栏</h3>
<p>侧边栏宽度随屏幕变化调整，小屏幕下会移动到内容下方。</p>
</aside>
</div>
</main>
<footer class="footer">
<div class="container">
<p>版权所有 © 网站名称</p>
</div>
</footer>
</body>
</html>
接下来编写对应的CSS样式，实现流式布局与固定布局的结合：
/* 重置基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
}
/* 流式布局的外层容器，宽度100%适配屏幕 */
.header, .main, .footer {
width: 100%;
padding: 20px 0;
}
/* 固定布局的内层容器，最大宽度1200px，居中显示 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 页头样式 */
.header {
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
display: flex;
list-style: none;
}
nav li {
margin-left: 20px;
}
nav a {
text-decoration: none;
color: #333;
}
/* 主内容区使用flex布局实现流式调整 */
.main .container {
display: flex;
gap: 30px;
margin-top: 30px;
}
/* 核心内容区域固定宽度占比 */
.content {
flex: 1;
min-width: 0; /* 防止内容溢出 */
padding: 20px;
background-color: #fff;
border: 1px solid #eee;
}
/* 侧边栏流式调整，小屏幕下宽度占满 */
.sidebar {
width: 300px;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #eee;
}
/* 页脚样式 */
.footer {
background-color: #333;
color: #fff;
text-align: center;
margin-top: 30px;
}
/* 响应式适配，小屏幕下调整布局 */
@media (max-width: 768px) {
.header .container {
flex-direction: column;
align-items: flex-start;
}
nav ul {
margin-top: 15px;
}
nav li {
margin-left: 0;
margin-right: 15px;
}
.main .container {
flex-direction: column;
}
.sidebar {
width: 100%;
margin-top: 20px;
}
}
实现要点说明
- 外层
header、main、footer元素使用width: 100%实现流式布局，适配所有屏幕宽度。 - 内层
container类使用max-width: 1200px和margin: 0 auto实现固定布局效果，限制内容最大宽度并居中，屏幕宽度小于1200px时自动变为流式适配。 - 主内容区使用
flex布局，核心内容区域flex: 1自动占满剩余空间，侧边栏固定宽度，实现两部分布局的灵活结合。 - 通过媒体查询添加响应式规则，小屏幕下将侧边栏移动到内容下方，保证移动端的展示效果。
这种结合方式既保留了流式布局的适配优势，又通过固定布局保证了核心内容的展示稳定性，适合大多数企业官网、内容类网站的开发需求，开发者可以根据实际场景调整固定区域的宽度和响应式断点。