什么是浮动，先来看浮动的定义
在网页设计中，"浮动"是一种布局技术，用于控制元素在页面中的位置。浮动元素会脱离正常的文档流，并移动到其容器的左侧或右侧，允许其他内容环绕它。

通常，浮动被用于创建多栏布局或使图像和文本等内容在页面上对齐。例如，你可以使用浮动将一张图片放置在文本旁边，让文字环绕图片。

浮动元素可以是块级元素或内联元素，但是一般情况下，我们更多地使用它们来布局块级元素。

要将元素浮动，可以使用 CSS 中的 float 属性，其值可以是 left、right 或 none。当一个元素被浮动后，它会尽可能地移动到指定的方向，直到遇到容器的边界或另一个浮动元素为止。

可能看到这里，还有些迷糊，啥玩意，啥叫脱离正常的文档流。没事，接着往下看

在网页布局中，元素的排列通常是基于文档流的，即元素按照其在HTML文档中出现的顺序依次排列，每个元素会占据一定的空间。

但是，当元素被设置为浮动时，它会脱离文档流，其他元素会以一种不同于正常情况的方式排列。
具体来说，浮动元素会尽可能地移动到指定的方向（左侧或右侧），直到遇到容器的边界或另一个浮动元素为止。其他元素会尝试围绕浮动元素进行排列，而不会被浮动元素所覆盖。
这种浮动元素的影响会导致以下几个问题：
父元素的塌陷（Collapse）: 当父元素包含了浮动元素，并且没有设置适当的清除浮动，可能会导致父元素的高度塌陷，使得父元素的高度变为0，从而影响到布局。
文本环绕: 浮动元素可能会导致文本环绕其周围，使得文本的布局发生变化。
重叠和遮挡: 如果没有适当处理，浮动元素可能会重叠或者遮挡其他元素，导致布局混乱。

来看看没有浮动影响的文档流的布局
文档流（Document Flow）是指 HTML 文档中元素按照它们在文档中出现的顺序进行布局和排列的一种方式。元素在文档流中所占据的空间会影响到其他元素的位置和大小。

在文档流中，元素可以是块级元素（block-level elements）或内联元素（inline elements）。块级元素会占据一行，并且默认情况下会从上到下依次排列，每个块级元素会占据一整行的宽度，而内联元素则会在同一行内水平排列。

以下是一个简单的示意图，展示了文档流中的两个元素（一个块级元素和一个内联元素）的排列方式：

+-----------------------------------------------------------+
|  块级元素（Block-level element）                            |
|  在文档流中占据整行宽度，从上到下依次排列。               |
|  可以包含其他块级元素和内联元素。                          |
|                                                           |
|                                                           |
|                                                           |
+-----------------------------------------------------------+
+------------------------------+---------------------------+
|  内联元素（Inline element）   |  内联元素                 |
|  在同一行内水平排列，直到达到行的末尾自动换行。           |
|  可以在文本中嵌套，但不能包含块级元素。                  |
+------------------------------+---------------------------+

为了在使用浮动的时候又不影响正常的文档流，我们就需要使用清除浮动

清除浮动是一种在网页设计中常用的技术，用于解决因为浮动元素而引起的布局问题。浮动元素会脱离文档流，可能导致其父元素的高度塌陷，或者其他元素排列错乱、重叠等问题。清除浮动的主要目的是确保浮动元素不会影响到其容器或其他元素的布局。

清除浮动的方法通常是在包含浮动元素的容器中添加特定的样式或标记，使得容器可以正常地包裹浮动元素，从而避免布局问题。

使用伪元素清除浮动：通过在包含浮动元素的容器中添加一个空的伪元素，并设置其 clear 属性，使其不受浮动元素的影响，从而清除浮动效果。

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

使用额外的块级元素清除浮动：在浮动元素后面添加一个空的块级元素，并设置其 clear 属性，使其不受浮动元素的影响，达到清除浮动的效果。

<div class="float-container">
    <div class="float-left">左浮动元素</div>
    <div class="float-right">右浮动元素</div>
    <div style="clear: both;"></div> <!-- 清除浮动 -->
</div>

使用 overflow 属性清除浮动：设置包含浮动元素的容器的 overflow 属性为 auto 或 hidden，创建一个新的块格式化上下文，从而清除浮动。

.float-container {
    overflow: auto;
}