css清除浮动的方法有哪些

1. 什么是浮动

在CSS中，浮动指的是一种元素定位方式。一个浮动元素会在所在容器中脱离出来，向左或向右偏移，直到碰到另一个浮动元素或容器边缘。在浮动元素还没有出现之前，其他元素会被预留出位置，直到浮动元素出现后，这些元素会围绕浮动元素排列。

2. 如何清除浮动

在使用浮动元素的时候，我们常常碰到父元素高度塌陷等问题，此时需要清除浮动。下面介绍几种清除浮动的方法。

2.1 使用clear属性

clear属性用于指定一个元素在哪些浮动元素旁边不能显示。它的属性值可以是none、left、right和both，分别表示不清除浮动、清除左浮动、清除右浮动和清除左右浮动。比如下面的代码：

.clearfix {
  clear: both;
}

这个代码将所有带有clearfix类的元素都清除左右浮动。

2.2 固定高度

如果想要一个容器元素不被浮动元素撑开，我们可以通过设置一个固定的高度来解决问题。比如下面的代码：

.container {
  height: 100px;
}

这个代码会将.container元素的高度设置为100像素，如果其中有浮动元素，它们不会撑开.container元素。

2.3 使用overflow属性

如果父级元素只包含浮动元素，我们可以通过设置overflow属性来清除浮动。比如下面的代码：

.container {
  overflow: hidden;
}

这个代码会将.container元素的overflow属性设置为hidden，从而清除其中的浮动元素。

2.4 使用after伪元素

我们可以通过在父级元素中，使用一个after伪元素来清除浮动。比如下面的代码：

.container:after {
  content: "";
  display: block;
  clear: both;
}

这个代码会在.container元素最后增加一个伪元素，并将它的clear属性设置为both，从而清除其中的浮动元素。

3. 总结

通过这篇文章，我们了解了CSS中浮动的概念，以及常见的四种清除浮动的方法。在实际开发过程中，最好根据实际情况选择合适的方法来清除浮动。