用clearfix:after消除css浮动解决外部div不能撑开问题

首先，我们需要先了解什么是CSS浮动以及浮动的特性，浮动元素会脱离文档流和父元素的控制，从而产生问题，如外部div不能撑开内部浮动元素的高度等。

为了解决这种问题，我们通常会使用clearfix:after方法，让外部div能够正常的撑开内部浮动元素的高度，这个方法的核心是在外部div的伪元素:before或:after中加入clear:both这个属性，来清除浮动元素造成的影响。

下面，以两种完整的示例说明此方法的具体使用：

1. 示例1

HTML代码如下：

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="clear"></div>
</div>

CSS样式如下：

.parent {
  background-color: gray;
  overflow: hidden; 
}

.child1 {
  width: 50%;
  float: left;
  height: 100px;
  background-color: red;
}

.child2 {
  width: 50%;
  float: right;
  height: 120px;
  background-color: blue;
}
.clear {
  clear: both;
}

在上述代码中，我们使用了clear:both来清除浮动对外部div造成的影响，进而让外部div正常地撑开内部元素的高度。

1. 示例2

HTML代码如下：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS代码如下：

.container {
  border: 1px solid #000;
  overflow: hidden;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  margin: 10px;
  float: left;
}

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

在上述代码中，我们使用了::after伪元素来清除浮动对外部div造成的影响，这种方法更为简洁，使用起来也比较方便。

综上所述，使用clearfix:after清除CSS浮动有两种通用的方法，一是加入一个空div，然后在该div中使用clear:both，二是使用伪元素::after来达到清除效果。这两种方法虽然写法有所不同，但底层都是通过清除浮动来解决外部div不能撑开问题的。