教案
序号：10
授课日期
课时数
4
章节名称
任务11元素的浮动
教学内容
重点
元素的类型及转换、overflow属性、元素的浮动、清除浮动
难点
元素的浮动属性
教学目的与要求
掌握元素的类型及转换。
掌握overflow属性。
掌握元素的浮动、清除浮动。
了解元素浮动在网页布局中的作用。
教学方法
与手段
教师采用任务驱动法，使用教学PPT辅助授课。
教师操作演示，学生实训练习。
学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。
作业及
思考题
完成课堂上未完成的习题，通过网络平台上交作业。
通过回帖的方式回答课上留下的思考题。
预习下一节内容。
讲授内容
课堂组织
第一学时
（任务11元素的浮动
11.1元素的类型及转换、11.2overflow属性）
实操任务目标发布
实战演练——制作网站导航条
图10-SEQ图\*ARABIC\r11“网站导航条”网页
强化训练——制作浪漫花语百科网
图10-SEQ图\*ARABIC2“浪漫花语百科网”网页
知识准备
元素的类型
行内（inline）元素
不占有独立的一行
完全不支持盒子模型
一般不可以设置行内元素的宽度、高度、对齐等属性
宽度和高度由其内容来决定，内容多宽占多宽
如：span、a、strong、em、i、u、s、del、ins等。
块（block）元素
占有一行或多行
完全支持盒子模型
可以设置块元素的宽度、高度、对齐等属性
如：div、h1~h6、p、ul、ol、li、header、section、article、footer等。
行内块（inline-block）元素
不占有独立的一行
支持部分盒子模型
可以设置块元素的宽度、高度、对齐等属性
如：img、input等。
元素类型的转换
选择器{display:属性值;}
属性有四个值：
inline：将元素转换成行内元素。
block：将元素转换成块元素。
inline-block：将元素转换成行内块元素。
none：将元素隐藏，不占据页面空间。
子任务：
图10-SEQ图\*ARABIC3元素类型的转换
overflow属性
在盒子模型中，当盒子内的内容超出盒子的大小时，就会产生溢出现象。我们可以对超出的内容使用overflow属性进行设置。
语法规则：选择器{overflow:属性值;}
属性有四个值：
visible：默认值，内容显示在盒子框外
hidden：将超出的内容隐藏
scroll：始终出现滚动条
auto：根据实际情况作出调整，如果没有超出就正常显示，否则将会出现滚动条
图10-SEQ图\*ARABIC
图10-SEQ图\*ARABIC4overflow效果
第二学时
（任务11元素的浮动
11.3元素的浮动、11.4清除浮动）
一、知识准备
元素浮动
改变普通文档流的排列方式，使得块元素在同一行中排列，让网页布局更加方便。
语法规则：选择器{float:属性值;}
属性有三个值：
none：默认值，表示元素不浮动
left：左浮动
right：右浮动
图10-SEQ图\*ARABIC5左浮动元素的运动轨迹
图10-SEQ图\*ARABIC6右浮动元素的运动轨迹
浮动原则：
有浮动属性的元素肯定会移动，但未必会改变原来的位置。
有浮动属性的元素是脱离原有文档流的。
如果上一行没有浮动元素，那么下一行的浮动元素是移动不上去的。
非浮动元素会忽略掉它前面的浮动元素，取代其前面浮动元素的位置。
子任务：
图10-SEQ图\*ARABIC7同时设置左浮动效果
图10-SEQ图\*ARABIC8同时设置右浮动效果
图10-SEQ图\*ARABIC9box1设置为左浮动效果
图10-SEQ图\*ARABIC10box2、box3设置为左浮动效果
清除浮动
避免浮动元素对其他元素产生的影响
语法规则：选择器{clear:属性值;}
属性有三个值：
left：清除左浮动的影响
right：清除右浮动的影响
both：同时清除左右两侧浮动的影响
图10-SEQ图\*ARABIC11清除浮动前的效果
图10-SEQ图\*ARABIC12清除浮动后的效果
清除特殊浮动
图10-SEQ图\*ARABIC13清除特殊浮动前的效果
使用空标记清除浮动
图10-SEQ图\*ARABIC14使用空标记清除浮动
使用overflow属性清除浮动
图10-SEQ图\*ARABIC15使用overflow属性