在 LESS 中使用变量控制清除浮动效果
在前端开发中，浮动是布局中常用的一种方式，但是浮动元素会对其他元素的布局产生影响，特别是涉及到子元素的外边距时，会出现一些问题，比如高度坍塌等。为了解决这些问题，我们需要使用清除浮动的方法来处理。
在 CSS 中，清除浮动一般有四种方式：
额外添加空元素清除浮动
使用 clear 属性清除浮动
使用 overflow 属性清除浮动
使用 clearfix 类清除浮动
这些方法都可以很好地解决浮动带来的问题，但是，当我们的项目中有大量使用浮动时，每个浮动元素都需要清除浮动，这样就会导致代码量增加，出现冗余。因此，我们可以使用 LESS 中的变量来控制清除浮动的样式，从而减少代码量，提高效率。
LESS 的变量非常像一个存储器，我们可以在其中存储不同类型的值，并在后续的样式中引用它们。在 LESS 中，变量的格式为 @变量名: 值；
例如，我们可以定义一个变量来存储清除浮动的样式：
@clearfix {overflow: auto; zoom: 1;}
然后我们可以在项目中引用这个变量来清除浮动：
.container { @clearfix; }
这样，我们只需要在一个地方定义清除浮动的样式，就可以在整个项目中方便地重用它。
示例代码：
/* 定义清除浮动的变量 */ @clearfix {overflow: auto; zoom: 1;}
/* 引用清除浮动变量 */ .container:after, .row:after { content: ""; display: block; clear: both; @clearfix; }
.row { margin-bottom: 20px; }
.col-5 { width: 20%; float: left; margin-right: 5%; @clearfix; }
.col-5:last-child { margin-right: 0; }
通过使用 LESS 中的变量，我们可以简化清除浮动的代码，将其更好地封装起来，提高项目的可维护性。同时，也可以减少代码量，提升编码效率，让我们更专注于实现页面布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b85d05306f20b3a6612b21
