clear 万能清除浮动(clearfix:after)

“清除浮动”是Web开发中常用的技巧，旨在解决由浮动元素造成的布局问题。其中一种常见的清除浮动方法是使用“clearfix:after”的伪元素。

“清除浮动”是Web开发中常用的技巧，旨在解决由浮动元素造成的布局问题。其中一种常见的清除浮动方法是使用“clearfix:after”的伪元素。

什么是浮动？

在开始讲解清除浮动之前，首先要了解浮动元素是什么。浮动是CSS中一个常用的布局概念，一般是指元素脱离文档流，并向左或向右浮动。

什么是清除浮动？

当一个元素被浮动后，其原先占据的空间就会释放出来，如果下面的其他元素并没有足够的高度来填充它，布局就会出现问题，这时候就需要使用“清除浮动”的技巧，使得浮动元素所占据的空间不会影响后面的元素。

使用clearfix:after清除浮动

清楚浮动的方法有很多种，常见的一种是使用伪元素的方法“clearfix:after”进行清除。具体操作如下：

1. 首先定义一个clearfix类，其中包含以下 CSS 属性：

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

上述代码中，content:""是伪元素的基础，display: table是为了确保伪元素的尺寸与其包含块的尺寸相同，clear:both会在伪元素的下面插入一个空的块级元素，并将其立即清除float（向下移动）。

1. 现在，当您在HTML文档中使用浮动元素时，将“clearfix”类添加到其父元素上，如下所示：

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

在上述示例中，“.clearfix”类被应用于包含“浮动”类的父元素。这将导致添加的伪元素将匹配“（clearfix：after）”选择器，并清除它们下面的任何浮动元素。

两种实例

现在，我们来看看两个实际的应用场景：

实例1：在列表中使用float

假如你的页面有一个商品列表，你希望它们可以使用浮动元素排列，那么你可以给它们添加一个“clearfix”类来防止浮动元素对HTML文档造成不良影响，如下所示：

<ul class="product-list clearfix">
    <li class="product-item float-left">商品1</li>
    <li class="product-item float-left">商品2</li>
    <li class="product-item float-left">商品3</li>
</ul>

在上述示例中，我们给<ul>元素添加了一个“clearfix”类，并让其下面的每个“商品”列表项都浮动到左边。这将导致它们被正确地排列，并且浮动元素不会对HTML文档产生不良影响。

示例2：浮动元素事件

假设你有一个元素集合，个别元素要浮动，但它们是绝对定位而不是正常布局，则需要为其指定绝对定位，如下所示：

<div class="container">
  <div class="element-a absolute-position"></div>
  <div class="element-b"></div>
  <div class="element-c absolute-position"></div>
</div>

在上述示例中，world b没有绝对定位，但元素a和c都强制设置为绝对定位，因此你可以这样为元素a和c应用浮动：

.container {
  position: relative;
}
.element-a, .element-c {
  float: left;
  width: 50%;
  margin-right: -100%;
  position: absolute;
}

在上面的CSS中，当元素a和c被应用，并设置为绝对定位时，您可以将宽度设置为50%，并在浮动时将其移除，使其不影响下面的元素（也就是给其传递到继承自容器的位置和尺寸）。