清除浮动的5种方式

1. 什么是浮动？

在网页中，浮动是指元素脱离文档流，向左或向右移动，直到其外边缘碰到包含框或另一个浮动元素为止。
浮动元素会脱离文档流，不再占据文档流中的位置，但是会影响其他元素的位置，从而导致父元素的高度塌陷（height collapse）或者影响后续元素的布局位置，因此需要进行清除。

2. 清除浮动的方法

2.1、使用空的 div 清除浮动：

在浮动元素的后面添加一个空的 div 元素，并将其清除浮动。这个 div 需要添加一个清除浮动的样式，通常是设置 clear: both;。

<div style="clear: both;"></div>

2.2、使用伪元素清除浮动：

这是一种更加现代和常用的方法。通过在父元素上使用 :after 伪元素，并应用 clear: both; 样式来清除浮动。

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

2.3、使用 overflow 属性清除浮动：

将包含浮动元素的父元素设置为 overflow: hidden; 或 overflow: auto;，这会触发 BFC（块级格式化上下文），从而清除浮动。

.parent {
  overflow: hidden;
}

2.4、使用 clearfix 类清除浮动：

通过在父元素上添加 clearfix 类，并应用 :after 伪元素来清除浮动。

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

<div class="clearfix">
  <div class="float-left">左浮动</div>
  <div class="float-right">右浮动</div>
</div>

2.5、使用 Flexbox 清除浮动：

通过使用 Flexbox 布局，可以很容易地清除浮动。

.parent {
  display: flex;
  flex-wrap: wrap;
}