使用了float的标签，如何避免左侧贴边重叠？

使用 float 标签会导致元素脱离文档流，并向左或向右浮动，这可能会导致与相邻元素重叠。避免左侧贴边重叠的方法有很多，以下是几种常见且有效的解决方案：

1. 使用 clearfix:

这是最常用的方法之一。Clearfix 通过伪元素清除浮动，确保包含浮动元素的容器能够正确地包含它们。你可以使用以下的 clearfix 代码：

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

然后，将 clearfix class 添加到包含浮动元素的父容器中：

<div class="clearfix">
  <div style="float: left;">Left floated element</div>
  <div>Element after float</div>
</div>

2. 使用 overflow: hidden 或 overflow: auto:

这是一种更简洁的方法，但可能会导致内容被裁剪，如果内容超出容器的范围。在父容器上设置 overflow: hidden 或 overflow: auto 会使其创建一个新的块级格式化上下文 (BFC)，从而包含浮动元素。

.container {
  overflow: hidden; /* 或 overflow: auto */
}

<div class="container">
  <div style="float: left;">Left floated element</div>
  <div>Element after float</div>
</div>

3. 使用 display: flow-root:

display: flow-root 也是创建新的 BFC 的一种方法，它比 overflow: hidden 更不容易引起意外的副作用，因为它不会裁剪内容。

.container {
  display: flow-root;
}

<div class="container">
  <div style="float: left;">Left floated element</div>
  <div>Element after float</div>
</div>

4. 使用 clear: left:

在紧接浮动元素后的元素上使用 clear: left，可以强制该元素在浮动元素下方显示。

<div style="float: left;">Left floated element</div>
<div style="clear: left;">Element after float</div>

这种方法简单直接，但如果需要在多个地方清除浮动，可能会导致代码冗余。

5. Flexbox 布局:

如果可以，使用 Flexbox 布局是更现代化且更灵活的解决方案。Flexbox 可以轻松控制元素的排列方式，避免浮动带来的问题。

.container {
  display: flex;
}

.left-element {
  /* 根据需要设置宽度 */
}

<div class="container">
  <div class="left-element">Left element</div>
  <div>Element after</div>
</div>

6. Grid 布局:

与 Flexbox 类似，Grid 布局也提供了强大的布局能力，可以避免使用浮动。

选择哪种方法？

• clearfix 和 overflow 方法比较老旧，但兼容性好。
• display: flow-root 是一个较新的属性，兼容性也比较好，并且副作用更少。
• clear: left 简单直接，但可能导致代码冗余。
• Flexbox 和 Grid 是更现代化的布局方式，更灵活，推荐在新项目中使用。

根据具体情况选择最合适的方法。如果项目已经使用了 Flexbox 或 Grid，尽量使用它们来布局，避免混合使用浮动和其他布局方式。 如果只是简单的布局，display: flow-root 是一个不错的选择。 如果需要兼容非常老的浏览器，可以使用 clearfix。

希望这些信息能帮到你!