任务目标

通过CSS浮动属性设置首页成长路线部分单行布局

任务要求

（1）按照下图所示效果将已有的课程推荐页面“成长路线”列表进行改造，实现浮动单行布局。

（2）成长路线部分整体宽度1080像素并水平居中。

（3）成长路线标题部分两侧使用::before、::after选择器动态添加两条灰色直线。

（4）并通过设定父容器清除浮动样式解决浮动带来的父元素高度崩塌问题。

（5）3个课程单元水平排列并设定外边距20像素。

效果如下图：

任务实施

（1）对已完成的课程推荐页面“成长路线”列表内容进行备份并修改。

（2）设定标题部分内容，在header.css文件中使用::before、::after选择器动态添加两条灰色直线。

（3）设定课程单元所在的父元素div的class属性值为clear-fix，匹配common.css文件中的清除浮动样式内容，使用公用样式来设定div的宽度为1080像素并实现水平居中。

（4）设定课程单元对应的元素左浮动。

教学微课

教学课件

经验分享

overflow属性的作用效果，实际上是由于其“块状模型”特性所决定的。我们简单记忆其特性即可，“块状模型”的最突出作用就是，该元素内的所有内容不会对外部产生除了体积布局之外的任何影响，也就是说该元素和外部形成了一个完全对外密闭的空间。当不给该元素设定宽高时，自身本就会去包裹内内部元素，同时又要不能和外部产生影响，则自身就能完美适应内容变化了。

能量贴士

天命之谓性，率性之谓道，修道之谓教。语出《中庸》。