LESS 中清除浮动的几种方法

在前端开发中，浮动是经常用到的一种布局方式，但是浮动元素可能会造成父元素高度塌陷，从而影响页面的布局，因此我们需要清除浮动。下面介绍几种在 LESS 中清除浮动的方法。

1. 使用伪元素

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="clearfix"></div>
</div>

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

这里新增了一个 .clearfix 类，使用 ::after 伪元素清除浮动，是一种非常常见的方法。content 是必须的，但内容可以为空。display 属性设置为 block，使其占据一行，clear 属性指定清除浮动。

2. 使用 overflow

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

.parent {
  overflow: hidden;
}

这里只需给父元素添加一个 overflow: hidden; 属性即可清除浮动。这样做的原理是将 overflow 属性设置为除了 visible 以外的值，然后触发了该属性的“BFC”特性，让父元素包含子元素的浮动。

3. 使用 clear:both

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="clear"></div>
</div>

.clear {
  clear: both;
}

通过给一个新的 div 元素添加 clear 属性可以清除浮动。因为这个 div 元素是没有内容的特殊元素，将 clear 属性设置为 both 即可清除浮动。

4. 使用 display: table

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

.parent {
  display: table;
}

使用 display: table; 可以让父元素包含子元素的浮动。这是因为 table 元素具有容器性质，也就是它会自动包含子元素。

5. 使用 flex 布局

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

.parent {
  display: flex;
  flex-wrap: wrap;
}
.child {
  flex: 1 0 200px;
}

使用 flex 布局也可以清除浮动。flex-wrap: wrap; 可以让 flex 容器自动换行。.child 元素设置了一定的固定宽度，同时设置了 flex: 1 0 200px;，让子元素等分宽度。

总结

在 LESS 中清除浮动有很多方法，其中最常用的是使用伪元素和 overflow。在实际编码中，可以根据实际情况选择最合适的方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b09228add4f0e0ff9ebe09