2023为什么要用双伪元素清除法

用双伪元素清除法的原因是可以有效地解决浮动元素导致的布局问题，确保父元素正确计算其高度。在 CSS 中，浮动元素会脱离正常的文档流，可能导致父元素无法正确计算其高度，从而导致布局问题，双伪元素清除法是一种解决这个问题的常用方法。使用双伪元素清除法的原理是在浮动元素后面插入两个空的伪元素，并将这两个伪元素设置为块级元素等等。

本教程操作系统：Windows10系统、Dell G3电脑。

双伪元素清除法（Double Pseudo Element Clearing Method）是一种用于清除浮动元素的技术。在 CSS 中，浮动元素会脱离正常的文档流，可能导致父元素无法正确计算其高度，从而导致布局问题。双伪元素清除法是一种解决这个问题的常用方法。

使用双伪元素清除法的原理是在浮动元素后面插入两个空的伪元素，并将这两个伪元素设置为块级元素。这样，这两个伪元素将会扩展父元素的高度，从而解决了父元素无法正确计算高度的问题。

下面是一个使用双伪元素清除法的示例代码：

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

在上述代码中，`.clearfix` 类选择器用于选择需要清除浮动的父元素。通过使用 `::after` 伪元素和 `content: "";` 属性，我们在父元素的最后插入一个空的伪元素。然后，通过设置 `display: table;` 属性，将伪元素设置为块级元素，并使用 `clear: both;` 属性来清除浮动。

为了确保伪元素的正确显示，我们还添加了一个空的 `::before` 伪元素，并将其设置为块级元素。这是因为一些旧版本的 IE 浏览器可能无法正确处理只有 `::after` 伪元素的清除技术。

使用双伪元素清除法可以有效地解决浮动元素导致的布局问题，确保父元素正确计算其高度。然而，随着 CSS 布局技术的发展，现在更常用的解决浮动问题的方法是使用 Flexbox 或 Grid 布局，它们提供了更灵活和强大的布局功能。因此，在实际开发中，你可能更倾向于使用这些新的布局技术来解决布局问题，而不是依赖于双伪元素清除法。