CSS 词条目录
前端Wiki/CSS/进阶/传统布局

float 浮动

float 最初的设计目的只有一件事：文字环绕图片，就像杂志排版那样。设置 float: left 后，元素脱离文档流向左漂，后面的行内内容会环绕着它排列。

因为浮动元素「脱离了文档流」，父元素计算高度时不再包含它，于是出现经典的父元素高度塌陷问题：容器明明装着浮动内容，高度却变成 0。

在 Flexbox 普及之前，人们硬是把 float 用成了多列布局工具，也因此留下了「清浮动」这个历史包袱。今天的原则是：文字环绕用 float，布局交给 Flex/Grid。看到老项目里用 float 摆列，理解意图即可，新代码不要模仿。

本节要点float 的本职是文字环绕；浮动脱离文档流会导致父级高度塌陷；现代布局用 Flex/Grid，float 只用于环绕场景。
CSS
<style>
  .news {
    width: 260px;
    border: 1px solid #ddd;
    padding: 10px;
  }
  .news img {
    float: left;          /* 图片左浮 */
    width: 80px; height: 60px;
    margin: 0 10px 6px 0;
    background: #cde;
  }
</style>
<div class="news">
  <img src="thumb.png" alt="缩略图">
  <p>这里的文字会环绕在浮动图片的右侧，
     排满图片下方后占满整行。</p>
</div>
🔗 相关词条floatflexgrid文档流元素
← 上一篇文档流与display
📚 推荐阅读
YY UED 前端规范指南YY UED 前端规范指南万象云档优达学城前端样式指南优达学城前端样式指南万象云档移动前端开发经验指南移动前端开发经验指南万象云档Element Plus v2.2 组件库教程Element Plus v2.2 组件库教程万象云档带你入门前端工程带你入门前端工程万象云档
来自万象云档的免费在线书籍，点击封面直接阅读