【CSS中清除浮动】

为什么需要清除浮动？

浮动元素能够从正常文档流中脱离，并且会对其周围的布局产生影响。这可能导致父容器失去高度，从而影响其他元素的定位。为了确保布局正确，我们需要采取措施来清除浮动所带来的影响。

1. 使用空的div清除浮动

这是最传统的清除浮动方法之一。我们在浮动元素的末尾添加一个空的div，并且为其设置clear: both;样式，使其占据浮动元素之下的位置。这样可以确保父容器具有正确的高度。

示例代码：

<div class="parent">
  <div class="floated">浮动元素div>
  <div class="clearfix">div>
div>

<style>
  .clearfix {
    clear: both;
  }
style>

2. 使用伪类清除浮动

这是更现代的方法，它使用伪类来清除浮动，而无需在HTML中添加额外的标记。我们在父容器上应用伪类选择器 ::after，并设置其content属性为空，然后为其添加clear: both;样式。

示例代码：

<div class="parent">
  <div class="floated">浮动元素div>
div>

<style>
  .parent::after {
    content: "";
    display: table;
    clear: both;
  }
style>

3. 使用overflow属性清除浮动

通过在父容器上设置overflow: hidden;，可以触发BFC（块级格式化上下文），从而清除浮动。这样可以确保父容器正确地包含浮动元素。

示例代码：

<div class="parent">
  <div class="floated">浮动元素div>
div>

<style>
  .parent {
    overflow: hidden;
  }
style>