CSS布局 （三）：浮动——从文字环绕到多列布局

第三章：浮动------从文字环绕到多列布局

3.1 为什么要有浮动？

早期的网页设计经常需要一种效果：图片在左边，文字像流水一样环绕在它周围，就像报纸排版那样。

浮动（float） 正是为此而生。它的设计初衷是：让元素半脱离文档流，既能向左或向右靠边，又能让后续的文字环绕它排列。

用代码看最直观：

<img src="image.jpg" style="float: left; width: 100px; margin-right: 10px;">
<p>这是一段很长很长的文字。因为图片设置了左浮动，这段文字就会从图片的右边开始，然后自动换行到图片的下方继续排列，形成环绕效果。</p>

效果完美。

---

为什么文档流和定位做不到？

这种效果，用我们前面学过的知识很难实现。我们逐一验证：

• 文档流
  • 块级元素（图片默认行为）会独占一行，文字只能从下方开始，无法左右并排。
    
  • 行内元素虽然能左右并排，但文字遇到图片边缘就直接换行，不会"绕"到图片下方。
    

---

• 定位
  • 相对定位（relative） ：图片偏移后，原来的位置依然被占据，文字只能绕着原坑走。
    
  • 绝对/固定定位（absolute/fixed） ：图片完全脱离文档流，后续元素会直接覆盖上去，文字更不可能环绕。
    

---

浮动如何实现环绕？

浮动让图片向左或向右"漂浮"到父容器边缘，同时让段落文本避开它。下图分别是左浮动和右浮动的效果：

左浮动：图片靠左，文字从右边环绕。

右浮动：图片靠右，文字从左边环绕。

这就是浮动名字的由来：元素像"浮"在文档流表面，不占垂直空间，但它的存在依然影响着周围内容的排列。

---

3.2 浮动的副作用：并排与高度塌陷

除了文字环绕，浮动还能做另一件事：让多个块级元素横向排列。比如把三个盒子都设为左浮动，它们就会排成一行，形成多列布局。在 Flex 和 Grid 出现之前，这是实现并排布局的主要手段。

三个浮动元素并排，但父元素高度塌陷（红框没有包住它们）。

但并排是有代价的 ------因为浮动元素脱离了文档流，父元素在计算高度时会忽略它们，导致父元素高度为 0，这就是 "高度塌陷"。

为什么当年会用浮动做并排？

你可能会问：既然有 inline-block，为什么还要用浮动做并排？这是因为早期浏览器对 inline-block 支持不理想（尤其在 IE6/7 上存在严重 bug），而且它会带来烦人的"空白间隙"问题------元素之间的换行符会被渲染成空格，导致布局多出几像素。浮动没有这些问题，行为稳定，成了当时"最不坏"的选择。

---

3.3 清除浮动与最佳实践

既然浮动会导致父元素高度塌陷，那怎么解决呢？ 开发者们发明了各种"清除浮动"的 hack：

• 在父元素末尾加一个空元素，并设置 clear: both。
• 给父元素设置 overflow: hidden（触发 BFC）。
• 给父元素设置 display: flow-root（专门清除浮动的现代方法）。

这些方法本质上都是让父元素重新把浮动元素的高度计算进去 。背后的原理我们会在下一章 BFC 里详细解释。

现在你应该明白：

• 如果你想要文字环绕图片，浮动仍然是唯一的选择。
• 如果你只是想让几个元素左右并排 ，不要用浮动 ------用 inline-block、flex 或 grid 更简单，而且不会塌陷。

浮动做并排是历史遗留问题，如今 Flex 和 Grid 已经成熟，浮动终于可以回归它的本职工作了。