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

一号任务浮动不止——探索CSS的浮动魔法汇报人：xxx时间：2026任务说明01在模块3创建的“志愿者服务队招新”页面的基础上完成以下操作。（1）在现有的“加入我们”部分插入两个浮动的内容块，分别为“策划部”和“宣传部”，通过float:left和float:right来控制布局。（2）为浮动布局的内容块添加新的样式，并创建清除浮动的.clearfix类，确保后续内容不会受到浮动的影响。一号任务任务说明知识准备0201浮动的概念03清除浮动的方法目录02浮动未清除问题1.浮动的概念知识准备浮动是让元素脱离文档流并沿着其容器边缘对齐的技术。在CSS中主要通过float属性决定元素如何在其父容器内浮动。（1）float属性用于指定元素应该向哪一侧浮动。（2）浮动元素会尽可能地向指定方向移动，直到碰到容器的边缘或其他浮动元素。2.浮动未清除的问题属性值描述none默认值，元素不浮动left元素向左浮动right元素向右浮动inherit规定应该从父元素继承float属性值2.浮动未清除的问题知识准备使用float属性后不加以处理可能会导致一系列布局问题：（1）父元素高度塌陷当父元素内的子元素都设置了浮动（float:left或float:right）不再占据文档流中的空间，若父元素的高度没有明确指定或者没有内容来撑起高度，那么它的高度就会“塌陷”，如图所示不能正确包裹其子元素。（2）后续元素错误定位如果不对浮动元素进行清除，后续元素可能会出现在不应该出现的位置，例如，可能会与浮动元素重叠或错误地绕过这些元素。3.清除浮动的方法知识准备（1）给父级元素指定高度通过直接设置高度强制父元素包含浮动的子元素。此方式只适用于能计算出父元素确切高度的情况，即高度固定的布局，不具有通用性。（2）父级添加overflow属性对浮动元素的父容器overflow属性进行设置（overflow:hidden;或overflow:auto;），隐藏超出容器的部分从而间接清除内部的浮动。（3）在浮动元素后添加带有clear:both;的元素在浮动元素之后添加一个新的非浮动元素，并为其设置clear:both;，使新元素出现在所有前面的浮动元素下方，从而清除浮动。（4）使用伪元素清除浮动在父容器之后添加一个不可见的伪元素，并设置clear:both;来清除浮动。这种方法的优点是可以不需要额外的HTML结构。任务实现03任务实现01在“加入我们”部分插入两个浮动的内容块，分别为“策划部”和“宣传部”。通过使用float:left和float:right，可以灵活地控制这两个内容块的布局，使它们分别排列在页面的左侧和右侧，达到整齐的视觉效果。02为确保浮动布局不会影响页面后续内容的正常显示，我们需要为这些浮动元素添加相应的样式，同时创建一个.clearfix类来清除浮动，避免父容器高度塌陷或其他布局问题。/*浮动内容样式*/.float-box{width:45%;padding:15px;margin:10px;color:var(--primary);text-align:center;border-radius:5px;box-shadow:04px8pxvar(--shadow-color);background-color:#f1f1f1;}.float-left{float:left;background-color:#dff9fb;}.float-right{float:right;background-color:#f9ca24;}/*清除浮动*/.clearfix::after{content:"";display:block;clear:both;}<!--HTML部分--><divclass="section"><h2class="section-title">加入我们</h2><pclass="content-text">经过十年的努力，郁金香志愿服务队获得多项荣誉，优秀的你，难道不心动吗?</p><!--描述浮动布局内容--><divclass="float-boxfloat-left">策划部：负责活动中策划，制定详细的方案。</div><divclass="float-boxfloat-right">宣传部：负责推广宣传，设计视觉内容。</div><divclass="clearfix"></div><h3class="subsection-title">你能获得的</h3><ulclass="benefit-list"><li><spanclass="highlight-text">丰富的经验：</span>参与多样化的活动。