当css `float` 属性应用于元素时，它会将元素从正常的文档流中移除，使其浮动到其父容器的左侧或右侧，并允许其他内容环绕它。如果仅对一组兄弟元素中的部分元素应用浮动，未浮动的元素将保持在正常的文档流中，并会表现得好像浮动元素不存在一样，从而可能导致视觉上的重叠或父容器的高度“塌陷”，造成布局混乱。
CSS float 的核心机制
CSS中的float属性最初设计用于实现文本环绕图片的效果，但后来也被广泛用于创建多列布局。理解float的关键在于它对元素在“正常文档流”（Normal Document Flow）中的影响。
正常文档流
在没有float属性干预的情况下，HTML元素会按照它们在源代码中出现的顺序进行布局。块级元素（如div, p, h1等）会独占一行，并从上到下垂直堆叠；行内元素（如span, a, img等）则会在同一行内从左到右水平排列，直到空间不足时换行。这就是所谓的正常文档流。
float 的作用
当一个元素被设置为float: left或float: right时，它会发生以下变化：
- 脱离正常文档流： 浮动元素不再占据其在正常流中的空间。这就像它被提升到一个独立的“层”上，其他非浮动元素会忽略它的存在，并会占据它原本的位置。
- 移动到指定方向： 元素会尽可能地向其父容器的左侧或右侧移动，直到碰到父容器的边缘或另一个浮动元素的边缘。
- 内容环绕： 紧随其后的非浮动内容（通常是文本或行内元素）会环绕浮动元素。
布局场景分析
为了更好地理解float的工作原理，我们通过两种不同的布局场景进行分析。
立即学习“前端免费学习笔记（深入）”；
场景一：所有兄弟元素均浮动
在这种情况下，如果一组兄弟元素（例如两个div）都被设置为浮动，它们会脱离正常文档流，并尝试并排排列。
CSS 示例：
div {
width: 250px;
height: 100px;
border: 5px solid black;
color: black;
font-weight: bold;
margin: 25px;
}
* {
margin: 0px; /* 重置所有元素的默认外边距 */
}
div#d1 {
background-color: red;
vertical-align: top;
float: left; /* div#d1 浮动到左侧 */
text-align: center;
padding: 15px;
}
div#d2 {
float: left; /* div#d2 也浮动到左侧 */
background-color: green;
padding: 25px 50px 6px 6px;
}HTML 示例：
<div id="d1"> <p> DIV #1</p> </div> <div id="d2"> <p> DIV #2</p> </div>
结果分析：div#d1被设置为float: left，它脱离文档流并浮动到父容器的左侧。紧接着，div#d2也被设置为float: left，它同样脱离文档流，并尝试浮动到父容器的左侧。由于div#d1已经占据了左侧的空间，div#d2会紧随其后，显示在div#d1的右侧。因此，两个div会并排显示，布局符合预期。
场景二：仅部分兄弟元素浮动
这是导致“塌陷”或布局异常的常见情况。如果一组兄弟元素中只有一个被设置为浮动，而另一个保持在正常文档流中，就会出现问题。
CSS 示例：
div {
width: 250px;
height: 100px;
border: 5px solid black;
color: black;
font-weight: bold;
margin: 25px;
}
* {
margin: 0px;
}
div#d1 {
background-color: red;
vertical-align: top;
float: left; /* div#d1 浮动到左侧 */
text-align: center;
padding: 15px;
}
div#d2 {
/* float: left; */ /* div#d2 未设置浮动 */
background-color: green;
padding: 25px 50px 6px 6px;
}HTML 示例：
<div id="d1"> <p> DIV #1</p> </div> <div id="d2"> <p> DIV #2</p> </div>
结果分析：div#d1被设置为float: left，它脱离了正常文档流。此时，div#d1不再占据其在正常流中的空间。 div#d2没有设置float属性，因此它仍然处于正常文档流中。在正常文档流中，div#d2会表现得好像div#d1不存在一样，因为它会占据div#d1原本在文档流中的位置。 结果是，div#d2的顶部会与div#d1的顶部对齐（或者说，div#d2会从其父容器的左上角开始布局），因为div#d1已经“漂浮”在文档流之上。这导致div#d2的边框和背景会出现在div#d1的下方或重叠，而div#d2的文本内容则会尝试环绕div#d1。这种现象就是所谓的“塌陷”或重叠，因为非浮动元素没有为浮动元素腾出空间。
布局问题与解决方案
当使用float属性时，由于其会将元素脱离正常文档流，常常会导致父容器高度无法包裹浮动子元素，或者兄弟元素之间发生重叠。
常见问题：
- 父容器塌陷： 如果一个父容器只包含浮动子元素，那么它的高度会“塌陷”为0，因为它不再包含任何正常流中的内容来支撑其高度。
- 元素重叠： 如场景二所示，非浮动元素会忽略浮动元素占据的空间，导致视觉上的重叠。
解决方案：
-
清除浮动 (clear 属性)：
- 在浮动元素之后添加一个空的块级元素，并对其应用clear: both;。
- 使用clearfix hack（通过伪元素::after清除浮动），这是一种更优雅且常用的方法。
clearfix 示例：
.clearfix::after { content: ""; display: table; /* 或 block */ clear: both; }将.clearfix类应用于包含浮动元素的父容器。
-
BFC（块格式化上下文）： 通过创建新的块格式化上下文（Block Formatting Context，BFC），父容器可以包含其内部的浮动子元素。创建BFC的方法包括：
- overflow: hidden; (或 auto, scroll)
- display: flow-root; (现代CSS推荐)
- display: inline-block;
- position: absolute; 或 fixed;
- float: left; (父容器也浮动)
其中，overflow: hidden; 和 display: flow-root; 是最常用的两种。
-
现代布局方案：Flexbox 和 Grid： 对于多列布局或更复杂的布局，强烈推荐使用CSS Flexbox（弹性盒子）或 CSS Grid（网格布局）。它们提供了更强大、更直观的布局控制能力，并且不会像float那样将元素脱离文档流，从而避免了清除浮动等额外处理。
Flexbox 示例：
.container { display: flex; /* 启用Flexbox布局 */ } .item { width: 250px; height: 100px; border: 5px solid black; margin: 25px; /* 无需使用 float */ }HTML 示例：
<div class="container"> <div class="item" style="background-color: red;"> <p> DIV #1</p> </div> <div class="item" style="background-color: green;"> <p> DIV #2</p> </div> </div>使用Flexbox，两个div会自然地并排显示，且父容器的高度会自动包裹子元素，无需清除浮动。
总结
float属性是CSS布局中的一个重要概念，但其将元素脱离正常文档流的特性是理解其行为的关键。当仅对部分元素应用float时，未浮动的元素会忽略浮动元素占据的空间，从而导致视觉上的重叠或父容器的“塌陷”。为了避免这些问题，开发者需要掌握清除浮动或创建BFC的技巧。然而，对于现代Web布局，更推荐使用Flexbox和Grid等更强大、更灵活的布局模块，它们能以更直观的方式解决布局问题，并减少因float带来的副作用。
