在前端开发中，浮动是经常用到的一种布局方式，但是浮动元素可能会造成父元素高度塌陷，从而影响页面的布局，因此我们需要清除浮动。下面介绍几种在 LESS 中清除浮动的方法。
1. 使用伪元素
---- --------------- ---- --------------------- ---- --------------------- ---- ----------------------- ------
---------------- - -------- --- -------- ------ ------ ----- -
这里新增了一个 .clearfix 类，使用 ::after 伪元素清除浮动，是一种非常常见的方法。content 是必须的，但内容可以为空。display 属性设置为 block，使其占据一行，clear 属性指定清除浮动。
2. 使用 overflow
---- --------------- ---- --------------------- ---- --------------------- ------
------- - --------- ------- -
这里只需给父元素添加一个 overflow: hidden; 属性即可清除浮动。这样做的原理是将 overflow 属性设置为除了 visible 以外的值，然后触发了该属性的“BFC”特性，让父元素包含子元素的浮动。
3. 使用 clear:both
---- --------------- ---- --------------------- ---- --------------------- ---- -------------------- ------
------ - ------ ----- -
通过给一个新的 div 元素添加 clear 属性可以清除浮动。因为这个 div 元素是没有内容的特殊元素，将 clear 属性设置为 both 即可清除浮动。
4. 使用 display: table
---- --------------- ---- --------------------- ---- --------------------- ------
------- - -------- ------ -
使用 display: table; 可以让父元素包含子元素的浮动。这是因为 table 元素具有容器性质，也就是它会自动包含子元素。
5. 使用 flex 布局
---- --------------- ---- --------------------- ---- --------------------- ------
------- - -------- ----- ---------- ----- - ------ - ----- - - ------ -
使用 flex 布局也可以清除浮动。flex-wrap: wrap; 可以让 flex 容器自动换行。.child 元素设置了一定的固定宽度，同时设置了 flex: 1 0 200px;，让子元素等分宽度。
总结
在 LESS 中清除浮动有很多方法，其中最常用的是使用伪元素和 overflow。在实际编码中，可以根据实际情况选择最合适的方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b09228add4f0e0ff9ebe09