前端学习5：Float学习（仅简单了解，引出flex）
一、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>
