# 浮动布局练习

学习和掌握CSS浮动（float）属性

## 关于浮动

浮动是CSS中一种定位元素的方法，允许元素脱离正常文档 流，向左或向右移动，直到碰到容器边缘或另一个浮动元素

## 浮动的用

- 创建多列布局
- 实现图片环绕文本
- 制作导航菜单
- 实现响应式设计
- 清除浮动影响

## 文字环绕图片

这是一个使用浮动实现文字环绕图片的示例。通过将图片向左浮动，文本会自然地环绕在图片的右侧。浮动元素会脱离正常文档流，但文本内容会感知到浮动元素的存在并进行环绕。 浮动元素会尽可能地向左或向右移动，直到碰到容器边缘或另一个浮动元素。在这个例子中，图片被设置为向左浮动，所以文本会出现在图片的右侧。这是一个使用浮动实现文字环绕图片的示例。通过将图片向左浮动，文本会自然地环绕在图片的右侧。浮动元素会脱离正常文档流，但文本内容会感知到浮动元素的存在并进行环绕。 浮动元素会尽可能地向左或向右移动，直到碰到容器边缘或另一个浮动元素。在这个例子中，图片被设置为向左浮动，所以文本会出现在图片的右侧。

## 多列布局

使用浮动可以创建多列布局。下面是一个简单的三列布局示例：

图片1描述

图片1描述

图片1描述