Clearfix CSS

什么是 CSS Clearfix？

Clearfix 是一种 CSS 技术，它可以确保浮动元素包含在其容器内，并防止容器在包含浮动子元素时发生塌陷。CSS 中浮动的元素会从正常的文档流中移除，这有时会导致其父容器布局出现问题。

这是一个常见的情况：如果一个容器包含浮动元素，并且没有设置明确的高度，它可能会塌陷并导致布局问题。使用 Clearfix 可以确保容器能够正确地扩展以容纳其浮动的子元素。

清除浮动（或 clearfix）是一种让元素能够固定或清除其子元素的方式，这样我们就无需添加额外的标记。它解决了当多个浮动元素堆叠在一起时发生的错误。

如果我们设置侧边栏相对于主内容块靠左定位，元素就会塌陷并重叠。这就像子元素浮动且比其父元素高一样；它会溢出其容器。

通过使用 clearfix 方法，可以避免布局问题，并有效地包含容器中的浮动子元素。

通常，Clearfix 是通过给容器元素分配一个唯一的类或伪元素来应用的。为了在容器内容之后创建一个清除元素，一种流行的技术是使用 ::after 伪元素。

语法

CSS 中 clearfix 的语法如下：

使用 Clearfix CSS

CSS 中的 Clearfix 帮助我们解决处理浮动元素时出现的布局问题。以下是使用 Clearfix CSS 的一些原因。

1. 防止容器塌陷

带有浮动子元素的容器可能会塌陷，失去容纳其浮动子元素的能力，并可能塌陷为零高度。这可能会导致布局问题，例如元素的渲染与预期不同。

2. 包含浮动元素

当容器被浮动元素填充时，它无法再自动调整其高度以适应浮动子元素的大小。借助 Clearfix，容器会扩展以容纳其浮动的子元素。

3. 保持文档流

浮动的元素会从正常的文档流中移除。通过在浮动内容之后插入一个清除元素，clearfix 技术有助于恢复正常的文档流。

4. 易于实现

使用 Clearfix 技术相对容易。简化容器并添加一个 clearfix 类或伪元素是处理浮动元素引起的布局问题的简单方法。

5. 跨浏览器兼容性

由于 Clearfix 是一种常用且得到良好支持的技术，因此它适用于广泛的浏览器。它有助于在这些浏览器中可靠且一致地渲染布局。

需要注意的是，随着 Flexbox 和 Grid 等现代布局技术的引入，传统 Clearfix 的必要性通常已大大降低。但是，Clearfix 仍然有用，并且在需要浮动或处理旧布局的情况下得到应用。

示例

示例 1

HTML

CSS

输出

示例 2

在此示例中，图像被浮动并且比其容器高，因此它溢出了其容器。

现在，我们创建一个名为 jtp 的类，并将 overflow: auto; 属性添加到相应的元素。

上述 Clearfix 方法在管理 padding 和 margin 时效果很好。但是，一种更现代的 Clearfix 方法更安全。

示例 3：让我们看另一种 Clearfix 方法。

在此示例中，我们将 clear 属性设置为 'both'，这意味着不允许在左侧和右侧都存在浮动元素。我们将 display 属性设置为 'table'，这使得元素表现得像 HTML 的 <table> 元素。我们还必须将 content 留空。