对浮动与清除浮动的进一步理解浮动（用的少）作用：让块元素水平排列属性名：float 属性值： left 左对齐 ri

浮动（用的少）

作用：让块元素水平排列属性名：float 属性值：

left 左对齐
right 右对齐浮动的主要特点：
元素会脱离正常文档流
浮动元素会尽可能靠左或靠右
浮动元素会影响其后的元素布局
浮动元素不会影响其前的元素

额外标签法：在父元素内容的最后添加一个块级元素，设置css属性clear：both
单位元素法:和方法一一个意思，这个是给父级的属性
双伪元素法（推荐） before用来清除塌陷，after用来清除浮动
overflow方法父级元素添加css属性overflow：hidden
在浮动的下一个标签加clear-both属性（好像是react里的）

对浮动清除的进一步解释

export default function Component() {
  return (
    <div className="p-4 bg-gray-100">
      <h2 className="text-xl font-bold mb-4">浮动清除后的行为示例</h2>
      <div className="bg-white p-4 border border-gray-200 rounded-lg">
        <div className="float-left bg-blue-200 p-2 mr-4 mb-2 w-32 h-32">
          1. 左浮动元素
        </div>
        <div className="bg-green-200 p-2 mb-2">
          2. 受浮动影响的元素
        </div>
        <div className="clear-both bg-yellow-200 p-2 mb-2">
          3. 清除浮动的元素
        </div>
        <div className="bg-red-200 p-2 mb-2">
          4. 清除浮动后的元素（未清除浮动）
        </div>
        <div className="bg-purple-200 p-2 mb-2">
          5. 另一个未清除浮动的元素
        </div>
        <div className="float-right bg-pink-200 p-2 ml-4 mb-2 w-32 h-32">
          6. 右浮动元素
        </div>
        <div className="bg-indigo-200 p-2">
          7. 最后一个元素（未清除浮动）
        </div>
      </div>
    </div>
  )
}

蓝色元素：左浮动元素，脱离正常文档流。
绿色元素：受到蓝色浮动元素的影响，尝试在其右侧占据空间。
黄色元素：清除了浮动。它会出现在蓝色浮动元素下方，占据整行宽度。
红色元素：虽然在清除浮动的元素之后，但它自身没有清除浮动。因此，它的行为就像浮动从未被清除过一样。如果蓝色浮动元素足够高，红色元素仍会尝试在其右侧占据空间。
紫色元素：与红色元素行为相同，可能会受到蓝色浮动元素的影响。
粉色元素：新的右浮动元素，会影响其后的元素。
靛蓝色元素：受到粉色右浮动元素的影响，会尝试在其左侧占据空间。

关键点：

清除浮动（如黄色元素）只影响该元素本身，使其出现在所有先前的浮动元素下方。
清除浮动不会改变文档中浮动元素的状态。它们仍然是浮动的，可能会影响后续的元素。
在清除浮动的元素之后的元素（如红色和紫色元素），如果自身没有清除浮动，仍然可能受到前面浮动元素的影响。
新的浮动元素（如粉色元素）会创建新的浮动上下文，影响其后的元素。

再进一步注解

但是实际上经过实验并不会出现清除浮动的div下方的盒子还会浮动在之前的盒子上的情况

export default function Component() {
  return (
    <div className="p-4 bg-gray-100">
      <h2 className="text-xl font-bold mb-4">高浮动元素影响示例</h2>
      <div className="bg-white p-4 border border-gray-200 rounded-lg">
        <div className="float-left bg-blue-200 p-2 mr-4 mb-2 w-32 h-80">
          1. 左浮动元素（很高）
        </div>
        <div className="bg-green-200 p-2 mb-2">
          2. 受浮动影响的元素
        </div>
        <div className="clear-both bg-yellow-200 p-2 mb-2">
          3. 清除浮动的元素
        </div>
        <div className="bg-red-200 p-2 mb-2">
          4. 清除浮动后的元素（未清除浮动）<br/>
          
        </div>
        <div className="bg-purple-200 p-2 mb-2">
          5. 另一个未清除浮动的元素<br/>
          
        </div>
        <div className="clear-both bg-pink-200 p-2 mb-2">
          6. 再次清除浮动的元素<br/>
          这个元素清除了所有之前的浮动，所以它会出现在蓝色浮动元素的下方。
        </div>
        <div className="bg-indigo-200 p-2">
          7. 最后一个元素（未清除浮动）<br/>
          这个元素不再受蓝色浮动元素的影响，因为前面的粉色元素已经清除了所有浮动。
        </div>
      </div>
    </div>
  )
}