CSS 浮动、弹性布局（Flex）核心原理

一、传统浮动布局（Float）

1. 作用

实现元素横向排列，是Flex布局出现前的主流布局方式，多用于简单图文排版、多列布局。

2. 特性

• 浮动元素脱离标准文档流，不再占据普通文档流空间；

• 支持左右浮动（float:left/right）；

• 父元素高度塌陷（核心问题）：子元素浮动后，父元素无法自适应高度。

3. 清除浮动方法

• 伪元素清除（推荐）：给父元素添加clearfix类，通过::after清除浮动；

• 额外标签法：末尾添加空标签，设置clear:both；

• 父元素设置overflow:hidden。

二、Flex 弹性布局（现代主流布局）

Flex是一维布局模型，完美替代浮动布局，无高度塌陷问题，适配移动端、自适应布局，代码简洁、兼容性极佳。

1. 核心概念

开启条件：给父元素设置 display: flex；

父容器：弹性容器；子元素：弹性项目；默认横向排列。

2. 父容器常用属性

• flex-direction：设置主轴方向（横向/纵向排列）

• justify-content：主轴对齐方式（居中、两端对齐、均分）

• align-items：侧轴对齐方式（垂直居中、顶部/底部对齐）

• flex-wrap：是否自动换行（默认不换行，溢出压缩）

3. 子元素常用属性

• flex：分配剩余空间，实现自适应宽度

• align-self：单独设置自身侧轴对齐方式

• order：调整元素排列顺序，默认0，数值越小越靠前

三、布局选型原则

1. 简单横向多列、自适应布局优先使用Flex；

2. 传统浮动仅用于老旧项目维护，新项目全部使用Flex；

3. Flex适合一维布局，复杂二维网格布局使用Grid。