css怎么清除定位「css清除绝对定位的浮动」

在CSS中，我们可以使用clear属性来清除浮动。clear属性用于定义一个元素是否允许浮动在其上方。当设置了clear属性的元素的父元素高度不够高时，该元素会被推到其父元素的下方，从而清除浮动。

1. clear属性的值

clear属性有四个值：

• none：默认值。允许元素浮动在其上方。
• left：不允许左侧的元素浮动在其上方。
• right：不允许右侧的元素浮动在其上方。
• both：不允许左侧和右侧的元素浮动在其上方。

2. clear属性的使用

要使用clear属性，我们需要将其添加到需要清除浮动的元素的CSS样式中。例如，如果我们有一个包含三个浮动元素的容器，我们可以将clear属性添加到第四个元素中，以清除前面的浮动元素。

.container {
  width: 300px;
}

.float-left {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}

.float-right {
  float: right;
  width: 100px;
  height: 100px;
  background-color: blue;
}

.clear-float {
  clear: both;
  width: 100px;
  height: 100px;
  background-color: green;
}

在这个例子中，我们创建了一个包含三个浮动元素的容器。我们将clear属性添加到第四个元素（绿色方块）中，以清除前面的浮动元素。这样，绿色方块就会显示在红色和蓝色方块的下方，而不是它们之间。

3. clearfix类

为了简化清除浮动的过程，我们可以创建一个名为clearfix的类，并在需要清除浮动的元素上应用它。以下是一个简单的clearfix类的实现：

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

然后，我们可以在需要清除浮动的元素的CSS样式中添加clearfix类：

.container {
  width: 300px;
}

.float-left {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}

.float-right {
  float: right;
  width: 100px;
  height: 100px;
  background-color: blue;
}

.clearfix {
  clear: both;
}

在这个例子中，我们在容器的CSS样式中添加了clearfix类。现在，容器会自动清除其内部元素的浮动，而无需在每个需要清除浮动的元素上单独添加clear属性。