一、Float基础概念

1. 设计初衷：
float最初是为实现文字环绕图片的效果（类似杂志排版），后来被开发者用来做页面布局。

2. 核心特性：

使元素脱离普通文档流（但仍在DOM中）
元素会向左/右浮动，直到碰到父容器边缘或另一个浮动元素
行内元素（如文字）会感知浮动元素并环绕它

3. 常用值：

float: left; /* 向左浮动 */
float: right; /* 向右浮动 */
float: none; /* 默认值，不浮动 */

二、动手实战

案例1：基础文字环绕效果

<!DOCTYPE html>
<html>
<head><title>Float学习</title><style>.img {float: left;margin-right: 15px;width: 200px;}</style>
</head><body><div class="container"><img src="img/537动耳朵.gif" class="img"><p>我家乌萨奇宝宝出生在一个家风严明的传统家庭，从小注重品德的培养。言传身教中她形成了尊师敬长、诚实守信、敢于担当、知礼重节的良好品质。她向善向上，长于行动，班里有什么脏活累活都抢着干。有一年秋季开学，她去帮低年级的同学搬课本，累得满头大汗却一直坚持到最后，虽然汗水湿透了衣服但毫无怨言，她说这是她力所能及可以帮老师分担的事情，也很乐意能为低年级的同学们提供帮助。在家里，她经常帮助父母做家务，扫地、洗衣、整理房间这些别的女孩子不屑做的事情她却做得有声有色，极是自然。在父母偶有身体不适时，主动承担家中所有家务，是家里的小小女子汉。老师你好，我们家乌萨奇一直是特别可爱的宝宝，在家里它家务抢着做，常常学习到深夜，品学兼优，我生病了给我做饭烧热水，它有什么事都憋在心里，今天它一到家就哭哭啼啼的，我还以为怎么了，看到这个视频才知道，这种活动以后乌萨奇不参加了，谢谢老师。天杀的老师老子要把你打成三星折叠屏。我家乌萨奇宝宝出生在一个家风严明的传统家庭，从小注重品德的培养。言传身教中她形成了尊师敬长、诚实守信、敢于担当、知礼重节的良好品质。她向善向上，长于行动，班里有什么脏活累活都抢着干。有一年秋季开学，她去帮低年级的同学搬课本，累得满头大汗却一直坚持到最后，虽然汗水湿透了衣服但毫无怨言，她说这是她力所能及可以帮老师分担的事情，也很乐意能为低年级的同学们提供帮助。在家里，她经常帮助父母做家务，扫地、洗衣、整理房间这些别的女孩子不屑做的事情她却做得有声有色，极是自然。在父母偶有身体不适时，主动承担家中所有家务，是家里的小小女子汉。我家乌萨奇宝宝出生在一个家风严明的传统家庭，从小注重品德的培养。言传身教中她形成了尊师敬长、诚实守信、敢于担当、知礼重节的良好品质。她向善向上，长于行动，班里有什么脏活累活都抢着干。有一年秋季开学，她去帮低年级的同学搬课本，累得满头大汗却一直坚持到最后，虽然汗水湿透了衣服但毫无怨言，她说这是她力所能及可以帮老师分担的事情，也很乐意能为低年级的同学们提供帮助。在家里，她经常帮助父母做家务，扫地、洗衣、整理房间这些别的女孩子不屑做的事情她却做得有声有色，极是自然。在父母偶有身体不适时，主动承担家中所有家务，是家里的小小女子汉。</p></div>
</body>    
</html>

效果： 文字会紧密环绕在图片右侧和下方。

案例2：多元素浮动布局

<!DOCTYPE html>
<html>
<head><title>Float学习2</title><style>.gallery {width: 100%;height: 100%;background: lightblue;}.item {float: left;width: 100px;height: 100px;margin: 10px;background: pink;}</style>
</head><body><div class="gallery"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>
</html>

发现问题： 父容器高度塌陷（背景色消失）！因为浮动元素脱离了文档流。

可以发现：父容器无法自动计算浮动元素的高度，导致布局错乱。

修改：新加 overflow: hidden; /* 清除浮动 */

.gallery {width: 100%;height: 100%;background: lightblue;overflow: hidden; /* 新增：清除浮动 */}

现在父容器能正确包裹浮动元素了！

案例3：导航栏制作

<!DOCTYPE html>
<html>
<head><title>Float学习3</title><style>.navbar ul {list-style: none;  /* 去掉默认的列表样式 */overflow: hidden; /* 清除浮动 */background-color: #333; /* 设置背景颜色 */}.navbar li {float: left;}.navbar a {display: block; /* 使链接成为块级元素 */color: white; /* 设置文字颜色 */text-align: center; /* 文本居中 */padding: 14px 16px; /* 内边距 */text-decoration: none; /* 去掉下划线 */}.navbar a:hover {background-color: #111; /* 鼠标悬停时的背景颜色 */}</style>
</head><body><nav class="navbar"><ul><li><a href="floatdemo.html">Float学习</a></li><li><a href="floatdemo2.html">Float学习2</a></li><li><a href="floatdemo3.html">Float学习3</a></li></ul>
</body>
</html>

解释几个点：

1.为什么 .navbar ul里面要去掉默认的列表样式：list-style: none; ？

因为原本默认的样式是有三个点的，像无序列表的三个点，所以需要去除。

2.为什么.navbar 需要使链接成为块级元素a display: block; ？

因为这样我们就可以鼠标悬浮上去，是一整块。

现在更多的是使用flex布局，看看对比

一、Flex导航栏 vs Float对比表

特性	Float方案	Flex方案
代码复杂度	需要清除浮动	无需清除浮动
垂直居中	困难	轻松实现
间距控制	需计算margin	用`gap`属性一键控制
响应式适配	需要媒体查询	容器属性自动调节

二、Flex做导航栏

<!DOCTYPE html>
<html>
<head><title>Float学习4</title><style>.flex-navbar ul {display: flex; /* 使用flex布局 */list-style: none;  /* 去掉默认的列表样式 */padding: 0;margin: 0;background: #333;gap: 1px; /* 项之间的间距 */}.flex-navbar a {display: block; /* 使链接成为块级元素 */padding: 12px 20px;color: white;text-decoration: none; /* 去掉下划线 */background: #444;transition:  background-color 0.3s; /* 添加过渡效果 */}.flex-navbar a:hover {background-color: #f90; /* 鼠标悬停时的背景颜色 */}</style>
</head><body><nav class="flex-navbar"><ul><li><a href="floatdemo.html">Float学习</a></li><li><a href="floatdemo2.html">Float学习2</a></li><li><a href="floatdemo3.html">Float学习3</a></li></ul>
</body>
</html>