css清除浮动clearfix:after的用法详解（附完整代码）-前端开发

下面是详细讲解“css清除浮动clearfix:after的用法详解（附完整代码）”的完整攻略：

下面是详细讲解“css清除浮动clearfix:after的用法详解（附完整代码）”的完整攻略：

一、什么是浮动？

在 HTML 中，浮动是一种常见的布局方式，可以让元素脱离正常文档流，通过左或右浮动实现位置的调整。

但是，当我们使用浮动时，可能会出现一些问题，例如浮动元素引起父容器高度塌陷，导致布局混乱，这时候就要用到清除浮动。

二、清除浮动的几种方法

常见的清除浮动的方法有以下几种：

1. 使用空标签清除浮动

这是一种比较传统的清除浮动的方式，即在浮动元素的末尾添加一个空的 div 标签，并且在 CSS 中对该标签设置 clear 属性，让其下方的元素不受影响。例如：

<div class="clearfix">
  <div class="float-left">左浮动元素</div>
  <div class="float-left">左浮动元素</div>
  <div class="clear"></div>
</div>

.clear{
  clear:both;
}

2. 使用 overflow 属性清除浮动

当父元素设置 overflow 属性值为 auto 或 hidden 时，将会触发 BFC，从而清除浮动。例如：

<div class="clearfix" style="overflow:hidden;">
  <div class="float-left">左浮动元素</div>
  <div class="float-left">左浮动元素</div>
</div>

3. 使用 after 伪元素清除浮动

这是一种较为常见的清除浮动的方式，即在浮动元素的父元素中定义一个 after 伪元素，并将其清除浮动。它的优势在于不会占用 DOM 节点，更加优雅。例如：

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

需要注意的是，这种方式需要使用 clearfix 类来清除浮动，同时需要在 CSS 中定义 .clearfix 类的样式为：

.clearfix{
  zoom: 1; /* 触发 hasLayout 属性，IE6/IE7 有效 */
}

三、完整示例代码

下面是一个完整的示例代码，包括使用空标签、overflow 属性和 after 伪元素三种方式进行清除浮动：

<html>
<head>
  <style>
    .float{
      float:left;
      width:100px;
      height:100px;
      background-color:#f00;
      margin-right:10px;
      margin-bottom:10px;
    }

    /* 使用空标签清除浮动 */
    .clearfix{
      overflow:hidden;
    }
    .clearfix .clear{
      clear:both;
    }

    /* 使用 overflow 属性清除浮动 */
    .clearfix2{
      overflow:hidden;
    }

    /* 使用 after 伪元素清除浮动 */
    .clearfix3:before,
    .clearfix3:after{
      content:"";
      display:table;
    }
    .clearfix3:after{
      clear:both;
    }
    .clearfix3{
      zoom:1;
    }
  </style>
</head>
<body>
  <!-- 使用空标签清除浮动 -->
  <div class="clearfix">
    <div class="float"></div>
    <div class="float"></div>
    <div class="clear"></div>
  </div>

  <!-- 使用 overflow 属性清除浮动 -->
  <div class="clearfix2">
    <div class="float"></div>
    <div class="float"></div>
  </div>

  <!-- 使用 after 伪元素清除浮动 -->
  <div class="clearfix3">
    <div class="float"></div>
    <div class="float"></div>
  </div>
</body>
</html>

以上就是关于“CSS清除浮动clearfix:after的用法详解（附完整代码）”的完整攻略。