尝试用position、float布局页面。

在网页设计中，Position 和 Float 属性常用于 CSS 布局中，特别是当需要创建响应式和动态布局的时候。以下是这两者的基本概念：

1. **Position**：
- **Static**: 默认值，元素位于正常的文档流中，不会影响其他元素的位置。
- **Relative**: 元素相对于其正常位置偏移，其他元素依然按文档流排列。
- **Absolute**: 元素脱离了常规文档流，放置到指定的容器（通常是另一个定位元素）的位置上。
- **Fixed**: 元素相对于浏览器窗口定位，即使滚动页面也保持固定。

2. **Float**：
- **Left**: 元素向左浮动，腾出空间让其他内容紧贴其右侧。
- **Right**: 向右浮动，腾出空间让其他内容紧贴其左侧。
- `None` (默认): 元素不浮动，保持原始位置。

通过组合使用 position 和 float，可以实现如侧边栏、导航栏固定不动，主要内容区域自适应填充等复杂的布局效果。例如:

#sidebar {
   position: fixed; /* 定位为固定 */
   left: 0;
   width: 200px;
   background-color: #ccc;
}

#content {
   float: right; /* 内容区浮动到右边 */
   margin-left: 200px; /* 补偿侧边栏宽度 */
}