前端中为何float会导致父元素塌陷？

破坏性

**破坏性**float-float破坏父标记的原始结构，导致父标记塌陷。最根本的原因是：**带有浮点集的元素将离开文档流**。最根本的原因是，浮动设计的初衷是解决文本围绕图片的问题。你应该记住浮动的影响。

包裹性

**包裹性**也是float的一个非常重要的特性。使用float时，您必须熟悉此功能。让我们从一个小例子开始：

如果未设置普通div的宽度，它将填充整个屏幕。在前面的盒子模型部分中也提到了这一点。如果在div中添加“float:left”，它会突然变得紧凑，宽度也会改变，将三个单词包装在内容中——这就是包装。为div设置浮点数后，其宽度将自动调整为包裹内容宽度，而不是填充整个父容器。

注意，尽管div是包装的，但其显示样式没有改变。它仍然是“显示：块”。

为什么要包装浮子？事实上，答案必须从浮动设计的初衷中找到，浮动设计旨在实现文本包装效果。文本环绕图像很容易理解，但是如果您想将文本环绕div呢？此时，如果div没有被“包裹”，则无法实现环绕效果。

清除空格

Float还有一个你可能不熟悉的功能——空白。像往常一样，让我们先举个例子。

<div style=“border:2px纯蓝色；padding:3px；”>
<img src=“image/1.png”/>
<img src=“image/2.png”/>
<img src=“image/3.png”/>
<img src=“image/4.png”/>
</div>

添加“float:left”后：

通常，img的中间会有空格，因为多个img标记会有换行符，浏览器也会识别空格变化。在第二幅图中，“float:left”样式被添加到img中，这意味着img之间没有空格。这四个IMG紧密相连。

如果你之前没有注意到，现在想想之前编写的程序是否具有此功能。为什么float适合网页布局（俗称“积木”）？原因是由浮动排版创建的网页非常适合，甚至苍蝇也不能在中间飞行。

“空白空间”特性的根本原因是浮动将导致节点脱离文档流结构。它不属于文档流结构，因此换行符和它周围的空格与它无关。它试图尽可能靠近一侧，这就是所谓的清理