CSS清除浮动常用方法小结

什么是浮动？

浮动是指元素脱离文档流，沿着父元素的左边或右边浮动。浮动元素（float元素）既可以在文字周围排列，也可以在其它块元素的周围排列。

为什么要清除浮动？

浮动元素会影响元素的高度，导致父元素无法自适应高度。因此，我们需要清除浮动来解决这个问题。

清除浮动的方法

父元素使用clearfix

clearfix 是一种清除浮动的方法，它的原理是通过在父元素设置一个样式来清除子元素的浮动影响。clearfix 最常用的实现方式是在父元素中添加伪元素（::after）并设置为块级元素，同时清除所有浮动影响。

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

示例：

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-right"></div>
</div>

浮动元素使用clear

在浮动元素下添加一个空元素并设置 clear 样式，可以清除浮动影响。

.clear {
  clear: both;
}

示例：

<div class="parent">
  <div class="float-left"></div>
  <div class="float-right"></div>
  <div class="clear"></div>
</div>

总结

清除浮动是CSS应用中常见的问题，以上介绍的方法都可行。在实际开发中，可以根据具体情况选择不同的方法来清除浮动。