css要如何清除浮动

1. 什么是浮动？

在讨论如何清除浮动之前，先来了解一下什么是浮动。在CSS中，浮动可以让某个元素脱离文档流并向左或向右移动，它的内容会围绕着其他元素排列。

通常使用浮动来实现文本环绕图片的效果。另外，浮动也常用于布局中。

img {
  float: left;
  margin-right: 10px;
}

2. 清除浮动的方法

2.1 在父元素中添加clearfix

清除浮动最简单的方法是在父元素中添加clearfix类。clearfix类会触发BFC（块级格式上下文），从而清除浮动带来的影响。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

在父元素中添加clearfix类：

<div class="parent clearfix">
  <div class="child"></div>
  <div class="child"></div>
</div>

在clearfix类中，使用::after伪元素插入一个空元素，并将其设置为块级元素，清除浮动后的布局影响。

2.2 使用clear属性

在浮动元素下方添加一个清除浮动的元素，可以使用clear属性来实现。

.clear {
  clear: both;
}

在浮动元素

<div class="float-left"></div>
<div class="clear"></div>

2.3 父元素添加overflow属性

使用父元素添加overflow属性为auto或hidden也可以触发BFC，清除浮动。因为BFC会包含浮动元素，从而导致父元素有了高度，避免了父元素高度为0的情况。

.parent {
  overflow: hidden;
}

在父元素中添加overflow属性：

<div class="parent">
  <div class="child float-left"></div>
  <div class="child float-right"></div>
</div>

2.4 使用flexbox布局

如果浏览器兼容性不是问题，使用flexbox布局可以非常轻易地解决浮动问题。在父元素中设置display:flex即可。

.parent {
  display: flex;
}

在父元素中添加flexbox布局：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

3. 结论

以上介绍了几种常用的清除浮动的方法，在实际项目中应该根据具体情况来选择最合适的方法。可以根据浏览器兼容性、代码复杂度等因素来做出决定。

当清除浮动后，我们可以使用margin、padding等属性来控制浮动元素的位置和间距。