前端进阶课程二十五、：CSS核心进阶四 CSS浮动（float）与清除浮动（兼容旧项目）

本节课针对旧项目兼容必备的float布局展开学习，理解float的原理、特性及左/右浮动的用法，实操实现三栏布局 与图文环绕效果 。明晰浮动带来的父容器塌陷、元素覆盖等副作用，重点掌握额外标签法、overflow法、伪元素法、父元素浮动法四种清除浮动的方法，对比各方法的优缺点与适用场景。同时了解float布局的优劣及现代替代方案，搭配导航栏、图文环绕等作业，让学员能应对旧项目中的浮动布局问题，熟练清除浮动。

一、学习目标

理解float的作用和原理，掌握float的用法（左浮动、右浮动）；
掌握清除浮动的4种常用方法，理解每种方法的适用场景；
了解float布局的优缺点，能应对旧项目中的浮动布局问题。

二、核心知识点（含实操）

float原理与用法

定义：float用于让元素脱离正常文档流，向左或向右浮动，直到碰到包含块的边缘或其他浮动元素。

float的取值：left（左浮动）、right（右浮动）、none（默认值，不浮动）。

float的特性：

元素脱离正常文档流，但不脱离文本流（文本会围绕浮动元素排列）；

浮动元素会收缩包裹（宽度由内容决定，除非手动设置width）；

多个浮动元素会并排排列（如果空间足够），空间不足时，会自动换行；

内联元素浮动后，会自动变为块级元素（可设置width、height）。

示例：

这个示例会实现左侧固定宽度、右侧固定宽度、中间自适应的三栏布局，并展示文本环绕效果。

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>float 基础用法（TAB=4空格 + Grid 对比）</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 20px; line-height: 1.6; } .demo { margin-bottom: 40px; border: 1px solid #eee; padding: 20px; } h3 { margin-bottom: 15px; color: #333; } /* -------------------- float 三栏布局 -------------------- */ .float-container { border: 2px solid #ff9800; padding: 10px; /* 临时清除浮动，避免塌陷影响查看效果 */ overflow: hidden; } .float-left { float: left; width: 200px; height: 300px; background-color: #f0f8ff; padding: 10px; } .float-right { float: right; width: 200px; height: 300px; background-color: #fdf2e9; padding: 10px; } .float-middle { margin: 0 210px; height: 300px; background-color: #e8f4f8; padding: 10px; } /* 文本环绕示例 */ .text-wrap { margin-top: 20px; border: 2px solid #ddd; padding: 10px; } .float-box { float: left; width: 100px; height: 100px; background-color: #ffecd1; margin-right: 10px; } /* -------------------- Grid 实现同等三栏布局 -------------------- */ .grid-container { display: grid; /* 左200px + 自适应 + 右200px，列间距10px */ grid-template-columns: 200px 1fr 200px; gap: 10px; border: 2px solid #4caf50; padding: 10px; } .grid-left, .grid-right, .grid-middle { height: 300px; padding: 10px; } .grid-left { background-color: #f0f8ff; } .grid-middle { background-color: #e8f4f8; } .grid-right { background-color: #fdf2e9; } </style> </head> <body> <div class="demo"> <h3>float 三栏布局（左/右固定200px，中间自适应）</h3> <div class="float-container"> <div class="float-left">左侧栏（float: left）</div> <div class="float-right">右侧栏（float: right）</div> <div class="float-middle">中间栏（margin 自适应）</div> </div> <h3 style="margin-top: 20px;">float 文本环绕效果</h3> <div class="text-wrap"> <div class="float-box">浮动块</div> <p>这是围绕浮动元素的文本，float 元素脱离文档流但不脱离文本流，所以文本会绕开浮动块排列。即使浮动块不在正常布局流中，文字依然能识别其位置，这是 float 最核心的特性之一。</p> <p>继续添加文本验证：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="demo"> <h3>Grid 栅格实现同等三栏布局（更简洁）</h3> <div class="grid-container"> <div class="grid-left">左侧栏（Grid 200px）</div> <div class="grid-middle">中间栏（Grid 1fr 自适应）</div> <div class="grid-right">右侧栏（Grid 200px）</div> </div> </div> </body> </html> |

说明：

图示：

左/右侧栏分别用 float: left/right 脱离文档流，设置固定宽度；

中间栏通过 margin: 0 210px 避开左右浮动栏，实现自适应；

文本环绕示例中，浮动块脱离文档流，但文本会自动绕开它排列，体现"不脱离文本流"的特性。
实操练习：用float实现一个三栏布局（左侧固定宽度、右侧固定宽度、中间自适应），观察浮动元素的排列和文本环绕效果。

2. 浮动的副作用（必须掌握）

父元素塌陷：浮动元素脱离文档流，父元素无法感知浮动元素的高度，导致父元素高度为0；
相邻元素错乱：非浮动元素会被浮动元素覆盖（除文本外）；

浮动元素换行异常：多个浮动元素宽度总和超过包含块宽度时，会出现换行混乱。

示例：

这个示例会展示父元素高度塌陷 和非浮动元素被覆盖的问题。

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>浮动的副作用（TAB=4空格）</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 20px; line-height: 1.6; } .demo { margin-bottom: 40px; border: 1px solid #eee; padding: 20px; } h3 { margin-bottom: 15px; color: #333; } .desc { color: #666; margin-bottom: 10px; } /* -------------------- 副作用1：父元素塌陷 -------------------- */ .parent-collapse { border: 3px solid #ff4444; padding: 10px; } .float-item { float: left; width: 150px; height: 150px; background-color: #ffd700; margin-right: 10px; } /* -------------------- 副作用2：相邻元素错乱 -------------------- */ .sibling-item { width: 100%; height: 100px; background-color: #90ee90; border: 2px solid #32cd32; margin-top: 10px; } /* -------------------- 副作用3：浮动换行异常 -------------------- */ .float-wrap-error { width: 400px; border: 2px solid #666; padding: 10px; margin-top: 10px; } .small-float { float: left; width: 150px; height: 150px; background-color: #b3e5fc; margin: 5px; } /* -------------------- Grid 无副作用对比 -------------------- */ .grid-safe { display: grid; grid-template-columns: repeat(3, 150px); gap: 10px; border: 2px solid #4caf50; padding: 10px; width: 400px; margin-top: 10px; } .grid-item { height: 150px; background-color: #b3e5fc; } </style> </head> <body> <div class="demo"> <h3>副作用1：父元素塌陷</h3> <p class="desc">父元素边框本应包裹子元素，但因子元素浮动，父元素高度为0（仅能看到红色边框线）：</p> <div class="parent-collapse"> <div class="float-item">浮动子元素1</div> <div class="float-item">浮动子元素2</div> </div> </div> <div class="demo"> <h3>副作用2：相邻元素错乱</h3> <p class="desc">非浮动的绿色元素被浮动元素覆盖（仅文字绕开，元素本身被压在下面）：</p> <div class="float-item">浮动元素</div> <div class="sibling-item">我是相邻的非浮动元素，我的区域被浮动元素覆盖了</div> </div> <div class="demo"> <h3>副作用3：浮动换行异常</h3> <p class="desc">浮动元素总宽度超容器，换行时因高度不一致导致布局错乱：</p> <div class="float-wrap-error"> <div class="small-float">1</div> <div class="small-float" style="height: 180px;">2（高度更高）</div> <div class="small-float">3（换行异常）</div> </div> <h3 style="margin-top: 20px;">Grid 无换行异常对比</h3> <div class="grid-safe"> <div class="grid-item">1</div> <div class="grid-item" style="height: 180px;">2（高度更高）</div> <div class="grid-item">3（布局稳定）</div> </div> </div> </body> </html> |

说明：

图示：

父元素 .parent 因为子元素都浮动，无法感知子元素高度，导致高度塌陷（仅显示边框）；

非浮动的 .sibling 元素被浮动元素覆盖，只有文字会绕开，体现"相邻元素错乱"的问题。

3. 清除浮动的4种方法（重点，分场景使用）

方法1：额外标签法（最简单，兼容性好）
用法：在所有浮动元素的末尾，添加一个空的块级元素（如<div class="clear"></div>），给该元素设置clear: both;

优点：简单易懂，兼容性好（支持所有浏览器）；

缺点：添加无意义的空标签，语义化差，不利于代码维护。

方法2：父元素设置overflow（简洁，常用）

用法：给浮动元素的父容器设置overflow: hidden/auto/scroll（推荐overflow: hidden，无滚动条）；

原理：触发父元素的BFC，让父元素感知到浮动元素的高度；

优点：代码简洁，无需添加额外标签；

缺点：如果父元素内有超出内容，会被隐藏（需确认无超出内容场景）。

方法3：父元素设置伪元素清除浮动（推荐，语义化好）

用法：给父容器添加一个伪元素（::after），设置如下样式：
.parent::after {
content: ""; /* 伪元素必须有content */
display: block; /* 转为块级元素 */
clear: both; /* 清除左右浮动 */
height: 0; /* 避免占用空间 */
visibility: hidden; /* 隐藏伪元素 */
}

优点：语义化好，不添加无意义标签，兼容性好，可复用（封装为公共类）；

缺点：代码比overflow法稍多。

方法4：父元素也设置浮动（不推荐，副作用大）

用法：给浮动元素的父容器也设置float: left/right；

缺点：会让父元素也脱离文档流，导致父元素的父容器塌陷，引发连锁问题，仅在特殊场景使用。

示例：

这个示例会分别展示额外标签法、overflow 法、伪元素法、父元素浮动法的实现，并标注优缺点。

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>清除浮动的4种方法（TAB=4空格）</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 20px; line-height: 1.6; } .demo { margin-bottom: 40px; border: 1px solid #eee; padding: 20px; } h4 { margin-bottom: 10px; color: #333; } .desc { color: #666; margin-bottom: 10px; font-size: 14px; } .box { border: 3px solid #666; margin-bottom: 10px; } .float-item { float: left; width: 100px; height: 100px; background-color: #b3e5fc; margin: 5px; } /* -------------------- 方法1：额外标签法 -------------------- */ .clear { clear: both; } /* -------------------- 方法2：overflow 法 -------------------- */ .overflow-clear { overflow: hidden; /* 触发BFC清除浮动 */ } /* -------------------- 方法3：伪元素法（推荐） -------------------- */ .clearfix::after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { *zoom: 1; /* 兼容IE6/7 */ } /* -------------------- 方法4：父元素浮动法 -------------------- */ .parent-float { float: left; width: 100%; /* 必须设宽度，否则收缩 */ } /* -------------------- Grid 无需清除浮动对比 -------------------- */ .grid-no-clear { display: grid; grid-template-columns: repeat(auto-fit, 100px); gap: 5px; border: 3px solid #4caf50; padding: 5px; } .grid-no-clear .float-item { float: none; /* 取消浮动 */ margin: 0; } </style> </head> <body>  <div class="demo"> <h4>方法1：额外标签法</h4> <p class="desc">优点：简单；缺点：增加无意义空标签</p> <div class="box"> <div class="float-item">浮动1</div> <div class="float-item">浮动2</div> <div class="clear"></div>  </div> </div>  <div class="demo"> <h4>方法2：overflow 法（简单场景推荐）</h4> <p class="desc">优点：代码简洁；缺点：超出内容会被隐藏</p> <div class="box overflow-clear"> <div class="float-item">浮动1</div> <div class="float-item">浮动2</div> </div> </div>  <div class="demo"> <h4>方法3：伪元素法（生产环境首选）</h4> <p class="desc">优点：语义化好、可复用；缺点：代码稍多</p> <div class="box clearfix"> <div class="float-item">浮动1</div> <div class="float-item">浮动2</div> </div> </div>  <div class="demo"> <h4>方法4：父元素浮动法（不推荐）</h4> <p class="desc">优点：暂时解决塌陷；缺点：父元素脱离文档流，引发连锁问题</p> <div class="box parent-float"> <div class="float-item">浮动1</div> <div class="float-item">浮动2</div> </div> <div style="clear: both;"></div>  </div>  <div class="demo"> <h4>Grid 无需清除浮动（更优方案）</h4> <p class="desc">Grid 布局天然包裹子元素，无需任何清除浮动操作，布局更简洁稳定</p> <div class="grid-no-clear"> <div class="float-item">项1</div> <div class="float-item">项2</div> <div class="float-item">项3</div> </div> </div> </body> </html> |

说明：

图示：

额外标签法：在浮动元素末尾加 <div class="clear"></div>，通过 clear: both 清除浮动；

overflow 法：给父元素加 overflow: hidden 触发 BFC，让父元素包裹浮动子元素；

伪元素法：通过 ::after 伪元素模拟"额外标签"，无实际空标签，语义化最佳；

父元素浮动法：父元素也浮动会解决自身塌陷，但会让父元素脱离文档流，影响后续布局，仅特殊场景使用。
实操练习：用4种方法分别清除浮动，对比每种方法的效果和代码差异，总结适用场景。

float布局的优缺点与替代方案

优点：兼容性好（支持旧浏览器），实现简单，适合简单的横向排列布局；

缺点：容易出现布局错乱，清除浮动繁琐，不适合复杂布局（如垂直居中、自适应布局）；

替代方案：现代布局优先使用Flex/Grid布局，float仅用于兼容旧项目或简单文本环绕场景。

示例：

这个示例会用 float 实现简单横向布局，再用 Flex/Grid 实现相同效果，对比优缺点。

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>float 优缺点与替代方案（TAB=4空格 + Grid 核心）</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 20px; line-height: 1.6; } .demo { margin-bottom: 40px; border: 1px solid #eee; padding: 20px; } h3 { margin-bottom: 15px; color: #333; } .item { width: 100px; height: 100px; background-color: #81d4fa; margin: 5px; text-align: center; line-height: 100px; color: #333; } .tip { color: #666; margin-top: 10px; font-size: 14px; } /* -------------------- float 实现横向布局 -------------------- */ .float-container { border: 2px solid #ff9800; padding: 10px; overflow: hidden; /* 必须清除浮动 */ } .float-container .item { float: left; } /* -------------------- Flex 实现（过渡方案） -------------------- */ .flex-container { border: 2px solid #2196f3; padding: 10px; display: flex; flex-wrap: wrap; gap: 5px; /* 替代margin，更便捷 */ } /* -------------------- Grid 实现（现代首选） -------------------- */ .grid-container { border: 2px solid #4caf50; padding: 10px; display: grid; /* 自适应列数：每列100px，自动换行 */ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 5px; /* Grid 便捷实现垂直居中（float 需复杂处理） */ align-items: center; min-height: 120px; } </style> </head> <body> <div class="demo"> <h3>float 实现横向布局（缺点明显）</h3> <div class="float-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <p class="tip">缺点：需手动清除浮动、无法便捷垂直居中、margin 间距需手动调整、适配复杂</p> </div> <div class="demo"> <h3>Flex 实现横向布局（过渡方案）</h3> <div class="flex-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <p class="tip">优点：无需清除浮动、支持换行/居中；缺点：一维布局，复杂二维布局需嵌套</p> </div> <div class="demo"> <h3>Grid 实现横向布局（现代首选）</h3> <div class="grid-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <p class="tip">优点：二维布局更灵活、自适应列数、天然居中、无需清除浮动、间距可控，float 所有缺点均规避</p> </div> </body> </html> |

说明：

图示：

float 实现横向布局：必须手动清除浮动，且无法便捷实现垂直居中、自动间距等；

Flex 布局：一行 display: flex 即可实现横向排列，支持 flex-wrap、align-items 等属性，无需处理浮动问题；

Grid 布局：适合更复杂的二维布局，grid-template-columns 可实现自适应列数，比 float 灵活得多。

三、当日作业（30分钟）

用float实现一个导航栏（导航项横向排列，左浮动），分别用"伪元素法"和"overflow法"清除浮动，确保父容器高度正常；
用float实现一个图文环绕效果（图片左浮动，文本围绕图片排列）；
总结4种清除浮动方法的优缺点和适用场景，编写笔记，结合代码案例说明。

前端进阶 课程二十五、：CSS核心进阶四 CSS浮动（float）与清除浮动（兼容旧项目）

前端进阶课程二十五、：CSS核心进阶四 CSS浮动（float）与清除浮动（兼容旧项目）