第三章：浮动------从文字环绕到多列布局
3.1 为什么要有浮动？
早期的网页设计经常需要一种效果：图片在左边，文字像流水一样环绕在它周围，就像报纸排版那样。
浮动（float） 正是为此而生。它的设计初衷是：让元素半脱离文档流，既能向左或向右靠边，又能让后续的文字环绕它排列。
用代码看最直观：
html
<img src="image.jpg" style="float: left; width: 100px; margin-right: 10px;">
<p>这是一段很长很长的文字。因为图片设置了左浮动，这段文字就会从图片的右边开始，然后自动换行到图片的下方继续排列，形成环绕效果。</p>效果完美。
为什么文档流和定位做不到？
这种效果，用我们前面学过的知识很难实现。我们逐一验证：
- 文档流
- 块级元素（图片默认行为）会独占一行，文字只能从下方开始，无法左右并排。
- 行内元素虽然能左右并排，但文字遇到图片边缘就直接换行，不会"绕"到图片下方。
- 块级元素（图片默认行为）会独占一行，文字只能从下方开始，无法左右并排。
- 定位
- 相对定位（relative） ：图片偏移后，原来的位置依然被占据，文字只能绕着原坑走。
- 绝对/固定定位（absolute/fixed） ：图片完全脱离文档流，后续元素会直接覆盖上去，文字更不可能环绕。
- 相对定位（relative） ：图片偏移后，原来的位置依然被占据，文字只能绕着原坑走。
浮动如何实现环绕？
浮动让图片向左或向右"漂浮"到父容器边缘，同时让段落文本避开它。下图分别是左浮动和右浮动的效果：
左浮动：图片靠左，文字从右边环绕。
右浮动：图片靠右，文字从左边环绕。
这就是浮动名字的由来：元素像"浮"在文档流表面，不占垂直空间，但它的存在依然影响着周围内容的排列。
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 已经成熟，浮动终于可以回归它的本职工作了。
