众所周知，CSS是页面设计中不可或缺的一部分。而经典的页面布局案例则是我们学习和掌握CSS的重要素材。今天，我们来看一些经典的CSS页面布局案例，以帮助您更好地理解和应用CSS。

.container {
  width: 960px;
  margin: 0 auto;
}
header {
  background: #333;
  color: #fff;
  padding: 20px;
}
nav {
  float: left;
  width: 20%;
  height: 500px;
  background: #ccc;
  overflow: auto;
}
.content {
  float: left;
  width: 60%;
  height: 500px;
  padding: 20px;
}
aside {
  float: right;
  width: 20%;
  height: 500px;
  background: #ccc;
  overflow: auto;
}
footer {
  background: #333;
  color: #fff;
  padding: 20px;
}

这是一个常见的三栏布局，包括一个header、一个nav、一个content、一个aside和一个footer。通过float属性和width属性，我们可以实现三个容器并排显示。同时，通过overflow:auto属性，我们可以为容器添加滚动条。这种布局适用于大多数网站，使页面看起来更具有结构性和组织性。

.container {
  width: 960px;
  margin: 0 auto;
}
header {
  background: #333;
  color: #fff;
  padding: 20px;
}
section {
  float: left;
  width: 40%;
  height: 500px;
  background: #ccc;
  overflow: auto;
}
aside {
  float: right;
  width: 20%;
  height: 500px;
  background: #ccc;
  overflow: auto;
}
footer {
  background: #333;
  color: #fff;
  padding: 20px;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

这是一个常见的两栏布局，包括一个header、一个section、一个aside和一个footer。这种布局适用于图像集或其他需要横向展示的内容，使页面看起来更具有效性。通过使用clearfix类来清除浮动属性的方法，我们可以避免可能发生的样式损坏。

以上是两个经典的CSS页面布局案例。通过学习和实践这些布局，您可以更好地掌握CSS并将其应用于自己的页面设计中。