CSS float属性可以使HTML元素在其父元素内向左或者向右浮动。同一父元素内的内容将向上移动并环绕浮动元素。在本CSS float教程中，我将详细解释CSS float属性的工作方式。

CSS浮动示例

为了说明CSSfloat属性的工作方式，让我们首先来看一个HTML示例：

<div style="border:1px solid #cccccc;">

  This is the first text

  <div style="border: 2px solid red;">This is box 1</div>
  <div style="border: 2px solid green;">This is box 2</div>

  This is the last text
</div>

HTML代码包含一个div元素，该元素内部有一个文本，两个div元素和另一个文本。渲染后，外观如下所示：

在以下各节中，我将向我们展示如何使用CSSfloat属性使两个嵌套的div元素在其父元素内左右浮动。

float : left

现在，让我们尝试使用floatCSS属性使第一个嵌套的div元素左移。为此，我们将HTML元素的CSS" float"属性设置为" left"。下面的示例显示了一个div元素，其CSSfloat属性设置为left：

<div style="border:1px solid #cccccc;">

  This is the first text

  <div style="float: left; border: 2px solid red;">This is box 1</div>
  <div style="border: 2px solid green;">This is box 2</div>

  This is the last text
</div>

这是在浏览器中呈现时带有左侧浮动元素的示例：

注意第一个div元素(带有红色边框)现在如何浮动到其父元素内的左侧。现在，第一个文本很好地环绕了第一个div元素的右侧。第二个div元素仍位于第一个div元素下方，而最后一个文本位于其下方。

现在，让我们尝试使第二个嵌套的div也向左浮动。代码如下所示：

<div style="border:1px solid #cccccc;">

  This is the first text

  <div style="float: left; border: 2px solid red;">This is box 1</div>
  <div style="float: left; border: 2px solid green;">This is box 2</div>

  This is the last text
</div>

这是在浏览器中呈现代码时的样子：

现在，第一个和第二个嵌套的div元素都浮动到其父元素内的左侧。文本很好地环绕了两个浮动元素。

float : right

现在，让我们尝试使第二个嵌套的div浮动到右侧。为此，我们将其浮动属性CSS属性设置为right而不是left。这是代码：

<div style="border:1px solid #cccccc;">

  This is the first text

  <div style="float: left; border: 2px solid red;">This is box 1</div>
  <div style="float: right; border: 2px solid green;">This is box 2</div>

  This is the last text
</div>

这是在浏览器中呈现时的外观：

了解两个元素现在如何在其父元素内的每个方向上浮动。它们甚至位于相同的垂直位置(朝向父元素的顶部)。现在，文本通过在div元素之间呈现而环绕在两个div元素周围。

清除

现在，让我们添加第三个div元素，该元素也向左浮动：

<div style="border:1px solid #cccccc;">

  This is the first text

  <div style="float: left; border: 2px solid red;">This is box 1</div>
  <div style="float: right; border: 2px solid green;">This is box 2</div>
  <div style="float: left; border: 2px solid red;">This is box 3</div>

  This is the last text
</div>

这是在浏览器中呈现时的代码现在的样子：

请注意，两个左浮动元素是如何彼此位于同一条水平"线"上的。

现在想象一下，我们希望带有红色边框的两个div元素向左浮动，但彼此之间而不是彼此相邻。为此，我们需要设置clearCSS属性。

" clear" CSS属性可以采用以下值之一：

• left
• right
• both
• none

" left"值表示该元素应远离所有剩余的浮动元素。正确的值意味着该元素应远离所有正确的浮动元素。 " both"值均表示该元素应远离左右浮动元素。 " none"值表示不清除，这与省略" clear" CSS属性相同。

让我们将最后一个div元素的clearCSS属性设置为left。然后，最后一个div元素仍然应该向左浮动，但要远离第一个左边的浮动div元素。代码如下：

<div style="border:1px solid #cccccc;">

  This is the first text

  <div style="float: left;  border: 2px solid red;">This is box 1</div>
  <div style="float: right; border: 2px solid green;">This is box 2</div>
  <div style="float: left; clear: left border: 2px solid red;">This is box 3</div>

  This is the last text
</div>

这是在浏览器中呈现时的代码外观：

请注意，最后一个div元素仍然如何向左浮动，但仍位于第一个左边的浮动div元素下方(清除)。