CSS：清除浮动之双伪元素

听海边涛声

于 2024-07-18 14:18:51 发布

阅读量137

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/panghuangang/article/details/140521887

版权

说明

可以使用双伪元素清除浮动，也是给父元素加。

优点：代码更简洁。
缺点：照顾低版本浏览器。

语法：

/* 在父类上添加clearfix这个类，添加其它类也可以，只要对应上就行 */
/* 把这段话拷贝到样式表中就行 */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  /* IE6、7专有 */
  *zoom: 1;
}

示例

展示效果：
在这里插入图片描述

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 在父类上添加clearfix这个类，添加其它类也可以，只要对应上就行 */
    /* 把这段话拷贝到样式表中就行 */
    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      /* IE6、7专有 */
      *zoom: 1;
    }

    .box {
      width: 800px;
      border: 1px solid blue;
      margin: 0 auto;
    }

    .one {
      float: left;
      width: 300px;
      height: 200px;
      background-color: purple;
    }

    .two {
      float: left;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .footer {
      height: 200px;
      background-color: green;
    }

    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="box clearfix">
    <div class="one">子盒子1</div>
    <div class="two">子盒子2</div>
  </div>
  <div class="footer"></div>
</body>

</html>