JS中使用 after 伪类清除浮动实例

使用after伪类清除浮动是一种常见的解决嵌套布局中的浮动元素高度塌陷问题的方法。下面是使用 after 伪类清除浮动的详细攻略。

1. 什么是清除浮动？

在使用浮动布局时，浮动元素脱离了文档流，导致浮动元素父元素无法正常计算高度，进而导致父元素高度塌陷。因此，为了解决这个问题，需要使用一种叫做“清除浮动”的技术。

2. after伪类清除浮动的原理

使用 after 伪类清除浮动的原理是在浮动元素的最后一个元素的后面添加一个空元素，使用 CSS 中的 clear 属性规定元素的边（哪一边）不能挨着浮动元素。

3. 使用步骤

具体步骤如下：

步骤1：在浮动元素结束前添加空元素

在浮动元素的最后一个元素后面添加一个空元素：

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

步骤2：定义clearfix类

然后需要定义 clearfix 类，给其添加 after 伪类，同时规定其 display：block，content：""，clear：both。

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

示例1：清除浮动

下面是一个清除浮动的示例。其中，两个 float-left 类的元素进行了浮动，它们包含在 clearfix 类的元素中。添加了 clear 类来清除浮动，从而防止出现高度塌陷问题。

<div class="clearfix">
  <div class="float-left" style="background-color: red; width: 100px; height: 100px;"></div>
  <div class="float-left" style="background-color: blue; width: 100px; height: 100px;"></div>
  <div class="clear"></div>
</div>

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

示例2：清除浮动并左右对齐

下面是一个示例，其中两个浮动元素被清除，同时达到了左右对齐的效果。

<div class="clearfix">
  <div class="float-left" style="background-color: red; width: 100px; height: 150px;"></div>
  <div class="float-right" style="background-color: blue; width: 100px; height: 100px;"></div>
  <div class="clear"></div>
</div>

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

总结

以上就是使用 after 伪类清除浮动的完整攻略。使用这种方法可以很好地解决嵌套布局中的浮动元素高度塌陷问题，并且几乎可以适用于所有浏览器。