轻松解决CSS网格商品展示模块中浮动带来的高度问题，双伪元素来帮忙！

前端

2023-01-25 02:32:57

网格商品展示：清除浮动的不二法门——双伪元素

你是否曾经在制作网格商品展示模块时遇到这样的难题？每个商品整齐地展示在独立的盒子里，你精心添加了浮动效果，以提升美观度。然而，当商品加载到模块中时，你却发现整个模块的高度无法正确撑开，导致商品排列杂乱无章。

面对这种情况，你尝试了各种方法，例如设置盒子的高度、添加背景颜色，却始终无法奏效。不要担心，你并不孤单！许多前端开发者都曾陷入这样的困境。

问题的根源：浮动

当没有设置高度的盒子内设置了浮动时，就会导致盒子无法撑开，从而影响父元素的高度计算。浮动元素脱离了文档的正常流，与其他元素并列排布，仿佛悬浮在半空中。

解决方案：双伪元素

幸运的是，有一个简单而有效的解决方案——双伪元素。

什么是伪元素？

伪元素是一种 CSS 选择器，它允许你为元素添加特殊的样式，这些样式不会影响元素本身。它有两种类型：

::before：在元素之前插入内容。
::after：在元素之后插入内容。

如何使用伪元素清除浮动

要使用伪元素清除浮动，只需以下两个步骤：

在盒子的父元素上添加以下 CSS 样式：

position: relative;

这将为父元素设置相对定位，使其可以包含伪元素。

在盒子的父元素上添加伪元素 ::after：

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

content: ""：创建一个空内容，不会在页面上显示任何可见元素。
display: block：将伪元素设置为块级元素，占据整个父元素的宽度。
clear: both：清除浮动，强制伪元素位于父元素的所有浮动元素下方。

通过以上步骤，你可以轻松清除浮动，让整个模块的高度正确撑开。

示例代码

以下是一个完整的示例代码，演示如何使用双伪元素清除浮动：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
    }

    .item {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .container::after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>