css 怎么清除浮动

在 CSS 中，浮动是一种常见的布局方式，但是浮动元素可能会影响其他元素的布局。因此，我们需要清除浮动。下面是一个完整的攻略，包含了如何清除浮动的过程和两个示例说明。

如何清除浮动

1. 使用 clear 属性

我们可以使用 clear 属性来清除浮动。下面是一个示例：

<div class="container">
  <div class="float-left">Float Left</div>
  <div class="float-right">Float Right</div>
  <div style="clear: both;"></div>
</div>

.float-left {
  float: left;
}

.float-right {
  float: right;
}

上述代码中，我们使用 clear 属性来清除浮动。我们在浮动元素后添加了一个空 div 元素，并使用 clear 属性来清除浮动。这样，父元素就可以自适应高度。

2. 使用 overflow 属性

我们可以使用 overflow 属性来清除浮动。下面是一个示例：

<div class="container">
  <div class="float-left">Float Left</div>
  <div class="float-right">Float Right</div>
</div>

.container {
  overflow: hidden;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

上述代码中，我们使用 overflow 属性来清除浮动。我们将其设置为 hidden，以使父元素自适应高度。

示例说明

下面是两个示例，演示如何清除浮动。

示例一：使用 clear 属性

<div class="container">
  <div class="float-left">Float Left</div>
  <div class="float-right">Float Right</div>
  <div style="clear: both;"></div>
</div>

.float-left {
  float: left;
}

.float-right {
  float: right;
}

上述代码中，我们使用 clear 属性来清除浮动。我们在浮动元素后添加了一个空 div 元素，并使用 clear 属性来清除浮动。这样，父元素就可以自适应高度。

示例二：使用 overflow 属性

<div class="container">
  <div class="float-left">Float Left</div>
  <div class="float-right">Float Right</div>
</div>

.container {
  overflow: hidden;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

上述代码中，我们使用 overflow 属性来清除浮动。我们将其设置为 hidden，以使父元素自适应高度。