CSS--浮动

CSS 的浮动（Float）属性用于创建浮动框，可以让这些框向左或向右浮动，直到它们的外边缘碰到包含它们的容器的边缘或另一个浮动框为止。

解决浮动带来的问题，可以用以下几种方法：

1. 使用 clear 属性

clear 属性用于清除浮动，它可以用来阻止元素向某一侧浮动。

.clear {
  clear: both;
}

<div style="float: left;">I am a floated element.</div>
<div class="clear">I am a clearing div.</div>

2. 使用 overflow 属性

overflow 属性用于创建一个块级格式化上下文，当元素的 overflow 属性值不是 visible 时，该元素会生成一个块级上下文。

.overflow {
  overflow: auto; /* 或者 'hidden' */
}

<div class="overflow">
  <div style="float: left;">I am a floated element.</div>
</div>

3. 使用 ::after 伪元素

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

<div class="clearfix">
  <div style="float: left;">I am a floated element.</div>
</div>

4. 使用 flex 布局

.flex-container {
  display: flex;
}

<div class="flex-container">
  <div style="order: 2;">I am a floated element.</div>
</div>

5. 使用 grid 布局

.grid-container {
  display: grid;
}

<div class="grid-container">
  <div>I am a floated element.</div>
</div>

以上都是解决CSS浮动问题的方法，具体使用哪种，取决于实际需求和场景。