手写笔记

---

一、浮动（Float）

1.1 应用场景

• 实现文字环绕图片（传统图文排版）
• 实现横向多列布局（替代 inline-block 的早期方案）

1.2 基本特点

1. 元素浮动后，自动变为块盒（display 会被浏览器强制修改为 block）；
2. 浮动元素的包含块，与常规流一致，为父元素的内容盒；
3. 若父元素没有设置高度，常规流计算高度时会忽略浮动元素，导致父元素高度塌陷（height: 0）。

1.3 盒子尺寸规则

• width: auto：宽度自适应内容宽度；
• height: auto：与常规流一致，自适应内容高度；
• margin: auto：值为 0，无法实现水平居中；
• border/padding/百分比 设置与常规流一致。

1.4 盒子排列规则

1. 左浮动盒子：靠上靠左排列；
2. 右浮动盒子：靠上靠右排列；
3. 浮动盒子在包含块中排列时，会避开常规流块盒；
4. 常规流块盒在排列时，无视浮动盒子；
5. 行盒/行块盒排列时，会避开浮动盒子（即使是不同父元素也会自动让行）；
6. 浮动盒子之间不会发生外边距合并。

1.5 高度塌陷与清除浮动

• 根源：常规流盒子计算高度时，不会考虑浮动元素；
• 解决方法（清除浮动）：
  1. 空 div 法：在所有浮动盒子最后新增一个空块盒，设置 clear: both：

     .clearfix { clear: both; }

  2. 伪元素法（推荐）：在父元素上添加 clearfix 类，通过 ::after 伪元素清除浮动：

     .clearfix::after {
       content: "";
       display: block;
       clear: both;
     }

• clear 属性取值：
  • none：默认值，不清除浮动；
  • left：清除左浮动，元素出现在前面所有左浮动盒子下方；
  • right：清除右浮动，元素出现在前面所有右浮动盒子下方；
  • both：清除左右浮动，元素出现在前面所有浮动盒子下方。

1.6 匿名行盒

• 若父元素没有任何行盒，浏览器会自动生成一个包裹文字的虚拟行盒，称为「匿名行盒」，浮动元素会避开匿名行盒排列。

---

二、定位（Position）

2.1 应用场景

手动控制元素在包含块中的精确位置，脱离常规流布局限制。

2.2 position 属性取值

取值	含义	核心特点
static	静态定位（默认值）	不定位，遵循常规流布局
relative	相对定位	相对自身原位置偏移，不脱离文档流
absolute	绝对定位	脱离文档流，相对于最近定位祖先元素定位
fixed	固定定位	脱离文档流，相对于浏览器视口固定位置

2.3 定位元素定义

只要元素的 position 取值不是 static，就被认定为「定位元素」。

2.4 相对定位（relative）

• 特点：
  1. 不脱离文档流，不会改变页面布局，仅在原位置上偏移；
  2. 盒子偏移不会对其他元素造成任何影响；
• 操作：通过 left/right/top/bottom 设置偏移量。

2.5 绝对定位（absolute）

• 特点：
  1. 完全脱离文档流，不占据常规流空间；
  2. width/height 为 auto 时，自适应内容宽度；
  3. 包含块变化：找祖先中第一个定位元素，其填充盒（padding-box）为包含块；若找不到，则包含块为整个页面（初始包含块）；
• 注意：绝对定位后元素一定是块盒，且一定不是浮动元素。

2.6 固定定位（fixed）

• 特点：
  1. 脱离文档流，相对于**浏览器视口（可视区域）**固定位置；
  2. 滚动页面时元素位置不变，常用于固定导航/返回顶部按钮；
• 包含块：浏览器视口（可视区域）；
• 注意：固定定位后元素一定是块盒，且一定不是浮动元素。

---

三、核心总结

1. 浮动：让元素横向排列，会导致父元素高度塌陷，需通过 clear 或伪元素清除浮动；
2. 相对定位：不脱离文档流，仅视觉偏移，适合微调元素位置；
3. 绝对定位：脱离文档流，基于定位祖先精确布局；
4. 固定定位：脱离文档流，基于视口固定，适合固定悬浮元素；
5. 定位元素：position 非 static，脱离常规流，常规流计算高度时会忽略它们。