CSS 浮动（float）属性定义元素的浮动方向。

浮动元素会向左或向右移动，直到它的外边缘碰到包含它的元素或另一个浮动元素的边缘为止。这被称为浮动上下文。

浮动元素会从文档流中提出，因此它们不会占据原来的位置。剩余的元素会在浮动元素之上渲染，因此浮动元素会影响布局。

浮动属性可以设置为以下值：

• left：元素向左浮动。
• right：元素向右浮动。
• none：默认值。元素不浮动。

语法：

float: left | right | none | inherit;

示例：

.float-left {
  float: left;
}

.float-right {
  float: right;
}

<div class="container">
  <img src="image.jpg" alt="image" class="float-left" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at nisi quis nisi posuere dictum. Duis elementum, urna at dictum rutrum, diam lorem tempus sem, non aliquam lacus est id leo. Suspendisse auctor consectetur lectus eu fermentum.</p>
</div>