float

CSS float 的原始用途、布局影响和为什么它在现代布局里更多是补充而不是主角。

#concept #growing #css #frontend

[!info] related notes

所属 MOC: CSS MOC

上位主题: 文档流、display 与定位

相关问题: BFC 是什么，有什么作用

float 最初不是为整页布局设计的，而是为了让文本围绕某个元素排版，比如图片左浮动、文字环绕。

一句话定义

浮动会让元素向左或向右贴边，并对周围内容的排布方式产生影响。

img {
  float: left;
  margin-right: 16px;
}

这时后面的文字会绕着图片排。

因为 Flex 和 Grid 更适合整体页面布局：

所以现在 float 更常见于：

清除浮动的目标不是“让浮动失效”，而是让后续元素不要继续受前面浮动元素影响。

经典方式包括：

float 是旧布局时代的重要机制，现在主要用于图文环绕和理解经典布局问题。