在前端开发中，浮动（float）是常用的布局技术。但是，浮动元素可能会导致父元素的高度计算错误，从而影响页面的布局。为了解决这个问题，我们通常会使用 clear 来清除浮动。
在 LESS 中，我们可以使用 clearfix 来清除浮动，使父元素正确计算高度，而不需要在 HTML 中插入额外的空元素或使用其他 hack 做法。
clearfix 的实现方式
在 LESS 中，我们可以使用以下的代码实现 clearfix：
-- -------------------- ---- -------
----------- -
---------
------- -
-------- ---
-------- ------
-
------- -
------ -----
-
-这个代码块定义了一个 mixin，名为 clearfix。它在元素的 before 和 after 伪元素上使用了 display: table，这个属性可以触发元素的 BFC（块级格式上下文），从而清除浮动影响。
在代码块的最后，使用了 clear: both 来清除浮动。由于这是在 after 伪元素上实现的，不会对元素本身产生影响。
现在我们可以在需要清除浮动的元素中直接使用 clearfix mixin，并将其加入到该元素的 class 中：
.element {
.clearfix();
}这将使 .element 中的浮动元素被正确计算在内，可以避免父元素高度计算错误导致的布局问题。
示例代码
我们可以使用以下的示例代码来演示 clearfix 的使用。HTML 如下：
<div class="wrapper"> <div class="floated left">Left floated element</div> <div class="floated right">Right floated element</div> <div class="clearfix"></div> </div>
这里我们在浮动元素后插入了一个 clearfix 的 div。这是传统的方式，在 LESS 中我们可以使用 clearfix mixin 来实现。
接下来是 LESS 样式表：
-- -------------------- ---- -------
-------- -
----------------- --------
-------- -----
-------- -
------ ----
-------- -----
------- ----
------ -----
------- --- ----- -----
----------------- -----
-
----- -
------ -----
-
------ -
------ ------
-
------------
-这个代码中，我们使用了 left 和 right 类来设置浮动的清除方式。在 wrapper 的最后，我们使用了 clearfix mixin 来清除浮动。
这段代码将产生一个左右两侧浮动的元素，中间有一段空隙，该空隙的高度可以正确计算，避免了常见的布局问题。
使用清除浮动的技巧
- 在需要清除浮动的元素中加入 clearfix 类，这是一种常见的做法；
- 在 LESS 中，可以使用
clearfixmixin 来清除浮动，并使代码更为简洁； - 不要忘记加入 clearfix 的样式，否则布局可能会出现问题。
总结
在前端开发中，清除浮动是一个常见的需求。使用 clearfix 可以避免很多布局问题。在 LESS 中，我们可以使用 clearfix mixin 来实现清除浮动，并使代码更加清晰简洁。希望这个技巧对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ac8a8968c7c53b0a450f7