前言
上一篇《前端篇 06》中，我们已经掌握了CSS复合选择器和三大核心特性，能够精准控制元素的样式并解决样式冲突问题。但到目前为止，我们所有的元素都是按照默认的文档流从上到下、从左到右排列的，无法实现复杂的页面布局，比如左右分栏、导航栏横向排列、悬浮按钮等效果。
本篇作为前端篇的第七篇，我们将系统学习CSS传统布局的两大核心技术：浮动（Float） 和定位（Position）。虽然现在Flex和Grid等现代布局已经成为主流，但浮动和定位是所有CSS布局的基础，不仅大量老项目仍在使用，很多特殊的交互效果也必须依靠它们来实现。我们将从最基础的原理讲起，详细讲解每一种布局方式的特点、使用场景和常见问题，最后通过电商首页头部与导航栏的综合实战，将所有知识点融会贯通。
本节核心学习内容：
文章目录
- 前言
- 一、文档流的概念
- 二、浮动布局
-
- 2.1 浮动的基本语法
- 2.2 浮动的核心特点
- 2.3 浮动的经典应用场景
-
- 场景1：文字环绕图片（最初的设计目的）
- 场景2：实现横向布局（最常用）
- 2.4 浮动的副作用：父元素高度塌陷
- 2.5 四种清除浮动的方法详解
-
- 方法1：额外标签法（W3C推荐）
- 方法2：父元素添加overflow属性
- 方法3：单伪元素法
- 方法4：双伪元素法（最推荐）
- 三、定位布局
-
- 3.1 定位的组成
- 3.2 四种定位模式详解
-
- 1. 静态定位（static）
- 2. 相对定位（relative）
- 3. 绝对定位（absolute）
- 4. 固定定位（fixed）
- 3.3 子绝父相：最经典的定位组合
- 四、综合实战：从零搭建电商首页头部与导航栏
-
- 4.1 最终效果预览
- 4.2 完整代码
- 4.3 代码说明
- 五、常见误区与避坑指南
- 六、核心总结：传统布局知识点速查表
-
- 浮动布局
- 定位布局
- 经典组合
- 七、专栏订阅
一、文档流的概念
在学习布局之前，我们首先要理解**文档流（Normal Flow）**的概念，它是网页元素默认的排列规则。
定义：文档流是指网页元素按照从上到下、从左到右的顺序依次排列的默认布局方式。
- 块级元素：从上到下依次排列，每个独占一行
- 行内元素/行内块元素：从左到右依次排列，一行排满后自动换行
所有的CSS布局技术，本质上都是打破默认的文档流，将元素摆放到我们想要的位置。浮动和定位是最早的两种打破文档流的方式。
二、浮动布局
浮动最初的设计目的是为了实现文字环绕图片的效果，后来被广泛用于实现网页的横向布局，是传统网页布局中最重要的技术之一。
2.1 浮动的基本语法
通过float属性可以设置元素的浮动效果。
语法格式：
选择器 {
float: 取值
