浮动布局练习
学习和掌握CSS浮动（float）属性
关于浮动
浮动是CSS中一种定位元素的方法，允许元素脱离正常文档 流，向左或向右移动，直到碰到容器边缘或另一个浮动元素浮动的用
- 创建多列布局
- 实现图片环绕文本
- 制作导航菜单
- 实现响应式设计
- 清除浮动影响
文字环绕图片
这是一个使用浮动实现文字环绕图片的示例。通过将图片向左浮动，文本会自然地环绕在图片的右侧。浮动元素会脱离正常文档流，但文本内容会感知到浮动元素的存在并进行环绕。
浮动元素会尽可能地向左或向右移动，直到碰到容器边缘或另一个浮动元素。在这个例子中，图片被设置为向左浮动，所以文本会出现在图片的右侧。这是一个使用浮动实现文字环绕图片的示例。通过将图片向左浮动，文本会自然地环绕在图片的右侧。浮动元素会脱离正常文档流，但文本内容会感知到浮动元素的存在并进行环绕。
浮动元素会尽可能地向左或向右移动，直到碰到容器边缘或另一个浮动元素。在这个例子中，图片被设置为向左浮动，所以文本会出现在图片的右侧。
多列布局
使用浮动可以创建多列布局。下面是一个简单的三列布局示例：
图片1描述
图片1描述
图片1描述