4-1 浮动不止——探索CSS的浮动魔法.pptxVIP

一号任务浮动不止——探索CSS的浮动魔法汇报人：xxx时间：2026

任务说明01

在模块3创建的“志愿者服务队招新”页面的基础上完成以下操作。（1）在现有的“加入我们”部分插入两个浮动的内容块，分别为“策划部”和“宣传部”，通过float:left和float:right来控制布局。（2）为浮动布局的内容块添加新的样式，并创建清除浮动的.clearfix类，确保后续内容不会受到浮动的影响。一号任务任务说明

知识准备02

01浮动的概念03清除浮动的方法目录02浮动未清除问题

1.浮动的概念知识准备浮动是让元素脱离文档流并沿着其容器边缘对齐的技术。在CSS中主要通过float属性决定元素如何在其父容器内浮动。（1）float属性用于指定元素应该向哪一侧浮动。（2）浮动元素会尽可能地向指定方向移动，直到碰到容器的边缘或其他浮动元素。2.浮动未清除的问题属性值描述none默认值，元素不浮动left元素向左浮动right元素向右浮动inherit规定应该从父元素继承float属性值

2.浮动未清除的问题知识准备使用float属性后不加以处理可能会导致一系列布局问题：（1）父元素高度塌陷当父元素内的子元素都设置了浮动（float:left或float:right）不再占据文档流中的空间，若父元素的高度没有明确指定或者没有内容来撑起高度，那么它的高度就会“塌陷”，如图所示不能正确