任务三：三栏式布局

面向人群：

不熟悉基本的 CSS 布局者

难度：

简单

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。咱们尽力保证课程内容的质量以及学习难度的合理性，但即便如此，真正决定课程效果的，仍是你的每一次思考和实践。

课程多数题目的解决方案都不是惟一的，这和咱们在实际工做中的状况也是一致的。所以，咱们的要求不单单是实现设计稿的效果，更是要多去思考不一样的解决方案，评估不一样方案的优劣，而后使用在该场景下最优雅的方式去实现。那些最终没有被咱们采纳的方案，一样也能够帮助咱们学到不少知识。因此，咱们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，可是背后的思考和亲手去实践倒是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信经过和小伙伴们的交流，能让你的学习事半功倍。

任务目标

• 掌握HTML/CSS布局的概念
• 掌握盒模型的概念
• 掌握position与float的概念以及在布局时的用法

任务描述

• 使用 HTML 与 CSS 按照 示例图（点击查看） 实现三栏式布局。
• 左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。

任务注意事项

• 尝试 position 和 float 的效果，思考它们的异同和应用场景。
• 注意测试不一样状况，尤为是极端状况下的效果。
• 图片和文字内容请自行替换，尽量体现团队的特点。
• 调节浏览器宽度，固定宽度和自适应宽度的效果始终符合预期。
• 改变中间一栏的内容长度，以确保在中间一栏较高和右边一栏较高时，父元素的高度始终为子元素中最高的高度。
• 其余效果图中给出的标识均被正确地实现。

任务协做建议

• 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
• 各自完成任务实践
• 交叉互相Review其余人的代码，建议每一个人至少看一个同组队友的代码
• 相互讨论，最后合成一份组内最佳代码进行提交

参考资料

• MDN：position：了解 CSS position 属性的基本知识
• MDN：float：了解 CSS float 属性的基本知识
• Learn CSS Positioning in Ten Steps：经过具体的例子熟悉 position 属性
• 清除浮动（clearfix hack）：清除浮动是什么，如何简单地清除浮动
• StackOverflow：Which method of ‘clearfix’ is best?：清除浮动黑科技完整解读