float
CSS float 的原始用途、布局影响和为什么它在现代布局里更多是补充而不是主角。
#type / concept
#status / growing
#resource / css
#tech / dev / frontend
[!info] related notes
- 所属 MOC: CSS MOC
- 上位主题: 文档流、display 与定位
- 相关问题: BFC 是什么，有什么作用
float
float 最初不是为整页布局设计的，而是为了让文本围绕某个元素排版，比如图片左浮动、文字环绕。
一句话定义
浮动会让元素向左或向右贴边，并对周围内容的排布方式产生影响。
最常见的写法
img {
float: left;
margin-right: 16px;
}这时后面的文字会绕着图片排。
它带来的几个关键效果
- 元素会偏向容器的左侧或右侧
- 后面的文本可能环绕它
- 父元素如果只包含浮动子元素，可能出现高度塌陷
为什么现代布局里不再把它当主力
因为 Flex 和 Grid 更适合整体页面布局：
- 表达更直接
- 对齐能力更强
- 可维护性更好
所以现在 float 更常见于：
- 图文环绕
- 旧项目兼容
- 理解 BFC 和清除浮动的经典题
清除浮动是什么意思
清除浮动的目标不是“让浮动失效”，而是让后续元素不要继续受前面浮动元素影响。
经典方式包括：
clear: both- 给父元素建立 BFC
- 现代项目中直接改用 Flex / Grid
最短记忆方式
float 是旧布局时代的重要机制，现在主要用于图文环绕和理解经典布局问题。