CSS相关知识

1.清除浮动的方法

2.定位

静态定位相当于标准流

相对定位不脱离文档流，仍然占据原来的位置（最频繁的作用是给绝对定位当爹）

绝对定位脱离文档标准流，不再占有原来位置

3.BFC

1. 解决浮动元素导致的父容器高度塌陷

2. 阻止相邻元素的外边距（margin）重叠

3. 避免浮动元素与普通流元素重叠

BFC 的核心规则

1. 内部盒子在垂直方向上依次排列：与普通文档流类似，但 BFC 内的元素不会与外部元素产生布局干扰。
2. 垂直外边距会合并：但仅在 BFC 内部元素之间合并，与外部元素的外边距不合并。
3. BFC 容器不会与浮动元素重叠：若容器本身不浮动，其边框会自动避开浮动元素（类似普通流文本环绕浮动元素的效果）。
4. 计算 BFC 高度时，浮动子元素会被包含在内：解决高度塌陷的核心原理。

触发BFC的条件

• display: block、inline-block、table-cell、table-caption
• （块级元素默认属于 BFC，但需注意浮动或定位元素的特殊性）
• float: left 或 float: right（非 none）
• position: absolute 或 position: fixed（绝对 / 固定定位）
• overflow: hidden、overflow: auto、overflow: scroll（非 visible）
• display: flow-root（显式创建 BFC，语义更清晰）
• display: flex 或 display: grid（父容器会创建 BFC，子元素遵循 Flex/Grid 布局规则）