一、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>
