css 中如何使用 clearfix 和 clear 清除浮动

CSS中的clearfix方法和clear属性都是用于解决由浮动（float）引起的布局问题。当使用浮动布局时，父元素往往无法自动计算包含浮动元素的高度，导致页面布局混乱。使用clear属性可以清除浮动，但它需要应用于元素上，这会造成额外的标记。而clearfix技术则允许父元素清除其子元素的浮动，而不需要在HTML中添加额外的标记。

clearfix 技术的核心在于使用伪元素 ::after 来创建一个看不见的元素，它位于浮动元素之后，可以强制父元素扩展以包含浮动元素。clear 属性用于指定元素的哪一侧不应该浮动元素，可以有 left、right 或 both 值。

一、CLEARFIX 技术的应用

传统 Clearfix 方法

.clearfix:after {

  content: "";
  display: table;
  clear: both;
}

将上述 CSS 类应用于任何需要进行clearfix的容器元素上即可。这种方法的原理是通过伪元素::after来模拟添加了一个隐形的元素，并且这个元素会清除浮动，实现清除浮动的效果，而不需要改变HTML结构。

现代 Clearfix 方法

随着浏览器更新，现代方法可以使用更少的代码来实现同样的效果：

.clearfix {

  overflow: hidden;
}

另外一种方法是利用display: flow-root;声明使元素自成一体：

.clearfix {

  display: flow-root;
}

flow-root可以创建一个新的块级格式化上下文，因此内部的浮动会被该元素包含，从而也能解决高度塌陷的问题。

二、CLEAR 属性的使用

清除单侧浮动

.clear-left {

  clear: left;
}

此类作用于元素上，当该元素之前有浮动到左侧的元素时，它会被推到下一行的最上面。

清除两侧浮动

.clear-both {

  clear: both;
}

当你想要确保元素下方没有任何浮动元素时，使用clear: both;将清除两侧的浮动。

三、CLEARFIX 与 CLEAR 选择使用场景

Clearfix适用场景

Clearfix主要用于容器元素包含所有浮动子元素的情况，它不需要额外HTML元素并且保持了较为干净的DOM结构。

Clear适用场景

Clear属性适用于随后的兄弟元素，希望它们位于浮动元素下方的情况。Clear是逐个元素处理浮动的，比较灵活。

四、浮动和清除浮动的原理

浮动的工作原理

浮动元素会脱离文档流，向左或向右移动，直到到达其容器边缘或另一个浮动元素。经常用于实现文字环绕图片等效果。

清除浮动的工作原理

clear属性实际上是在某元素的上方创建了一个看不见的边界，它会阻止自身与前方的浮动元素在同一水平线上显示，从而清除了浮动效应。

总而言之，正确使用CSS中的clearfix技巧和clear属性对于创建干净、可预测的布局是非常重要的。这能确保即使在复杂的布局中，元素也能如预期般地显示，提高网站的整体可用性和访问者的体验。

相关问答FAQs：

Q1: 是什么导致浮动问题，为什么要使用clearfix进行清除浮动？
A1: 当元素浮动时，它会从常规文档流中脱离，并且不再占据空间。这就导致了浮动元素周围的容器高度塌陷和布局问题。因此，为了解决这个问题，我们需要使用clearfix进行清除浮动。

Q2: clearfix 是如何工作的，如何应用它来清除浮动？
A2: 清除浮动的一种常用方法是使用clearfix类。通过在包含浮动元素的父级元素上应用clearfix类，可以防止父元素高度塌陷。同时，clearfix类还会在父元素的伪元素(:after)中添加一个空内容，并设置clear属性为both。这样，伪元素会占据父元素的位置，使父元素能够正确计算高度并包含浮动元素。

Q3: 还有其他方式可以清除浮动吗？
A3: 当然，除了使用clearfix类清除浮动，还有其他几种常见的方法。例如，可以使用clear属性来清除浮动。通过在浮动元素后面添加一个带有clear属性的空元素，可以阻止浮动元素影响后续元素的布局。另外，可以通过在父级元素上使用overflow属性为auto或hidden，这样可以创建一个新的块级格式化上下文，从而清除浮动。

注意：以上方法各有优劣，应根据具体情况选择适合的浮动清除方法。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。