LESS 中如何实现清除浮动（clearfix）技巧总结
在前端开发中，浮动元素是非常常见的一种布局方式，但其会对后续元素造成影响，从而导致布局出现异常问题。因此，清除浮动（clearfix）就变得十分重要。本文将介绍LESS中实现清除浮动的技巧。
一、传统的清除浮动
在CSS中，我们通常使用clearfix来清除浮动元素的影响。传统的clearfix代码如下：
-- -------------------- ---- -------
----------------
------------
---------
------------------
--------------
-----------
-
----------
--------
-其中，::after 伪元素是在元素内容之后插入了一个空白的已选中的元素。通过给::after 添加content属性，让元素在页面上变得可见，并且通过设定height:0消除其对页面布局的影响。通过使用 clear: both;来清除浮动
二、LESS 中使用清除浮动
在LESS中，我们可以将传统的clearfix转化为一种具有更为简洁明了的写法：
-- -------------------- ---- -------
----------
---------
--------
-------- ---
-------- ------
-
--------
------ -----
-
-通过利用LESS中的父级选择器（&符号），我们可以将清除浮动的代码写的更为精简和优雅。使用 & 来指代父级选择器， &:before和&:after是伪类。
同时，我们可以通过 LESS 的 mixin（混入）来进一步优化代码：
-- -------------------- ---- -------
------------
---------
--------
-------- ---
-------- ------
-
--------
------ -----
-
-在 LESS 中，mixin 就像是一种可以在多个选择器中使用的代码块，类似于函数。我们可以通过使用 mixin 来编写具有重复性的代码，从而让代码可重复、可维护、可扩展。
三、实际应用中的示例
下面是一个以 Bootstrap 的栅格系统为基础的基础网格系统示例，其中 clearfix 在应用于 .row 和 .col-*-* 这两个选择器中：
-- -------------------- ---- -------
------------
---------
--------
-------- ---
-------- ------
-
--------
------ -----
-
-
-----
------ -----
---------- -------
------- - -----
------ ----------- ------ -
-------- - -----
-
---------------- -
------------- --
------------ --
- -----
- --------------- -
-------------- --
------------- --
-
-
------------
-
----------------
--------- ---------
----------- ----
-------------- -----
------------- -----
------------
-通过使用 mixins、 父级选择器和传统的 clearfix 的结合，我们能够更加优雅地清除浮动，提高代码的可读性和可维护性。这样的代码特别在大型项目中尤其重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3bca848841e989401d9f5