任务目标
- 掌握HTML/CSS布局的概念
- 掌握盒模型的概念
- 掌握position与float的概念以及在布局时的用法
任务描述
- 使用 HTML 与 CSS 按照 示例图（点击查看） 实现三栏式布局。
- 左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。
-
任务注意事项
- 尝试 position 和 float 的效果，思考它们的异同和应用场景。
- 注意测试不同情况，尤其是极端情况下的效果。
- 图片和文字内容请自行替换，尽可能体现团队的特色。
- 调节浏览器宽度，固定宽度和自适应宽度的效果始终符合预期。
- 改变中间一栏的内容长度，以确保在中间一栏较高和右边一栏较高时，父元素的高度始终为子元素中最高的高度。
- 其他效果图中给出的标识均被正确地实现。
参考资料
- MDN：position：了解 CSS position 属性的基本知识
- MDN：float：了解 CSS float 属性的基本知识
- Learn CSS Positioning in Ten Steps：通过具体的例子熟悉 position 属性
- 清除浮动（clearfix hack）：清除浮动是什么，如何简单地清除浮动
- StackOverflow：Which method of ‘clearfix’ is best?：清除浮动黑科技完整解读
-
三栏式布局总结
1、 浮动使父元素塌陷问题
（1）CSS float 属性
float属性定义一个盒子或者元素是否浮动。
注意：①绝对定位的元素忽略float属性。
②浮动元素脱离原文档流，浮动元素后的块级元素处在浮动元素下层，但文字（以及行内元素）会环绕浮动元素，为避免这种情况，可在浮动元素后的元素增加clear属性或使用:after伪元素方法
（2）解决方案
①在父元素结束标签前，增加空div，并设置其样式“clear:both”。
原因：见float属性介绍。
②使用:after伪元素。
原因：由于第一个方案在HTML中增加了元素，所以使用:after伪元素，在父元素后增加一个元素。
方法一：父元素:after{
content:””;
display:block;
height:0;
clear:both;
}
方法二：父元素:after{
content:””;
display:table-cell;(或display:table;)
}
③在父元素中设置“overflow”属性，属性值为“auto或hidden”。
原因：CSS的“overflow”属性指内容超出父元素区域时，裁剪内容还是增加滚动条，属性值：hidden指裁剪内容超过部分内容不可见，属性值：auto指超出时增加滚动条。当父元素height为auto时，需要计算父元素高度以确定是否超出，在计算父元素高度时，包括了浮动元素的高度。
2、CSS position属性
position属性指明元素使用的定位方法。
属性值：
absolute:相对第一个position属性值不为static的祖先元素定位，脱离文档流，不在原文档流中占位。
relative:相对正常位置定位，不脱离原文档流。left:20px;可相像成有一个小人站在元素左边，将元素向右推20px;所以left和right不能同时使用，top和bottom不能同时使用，可相像成反向推没意义。
fixed:相对于浏览器窗口定位，脱离原文档流。
static:按文档流排布，默认值。此时，left，top，bottom，right设置无效。
综上：position和float是CSS中脱离文档流的两种情况。
3、已提交作业
代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/tree/master/任务三：三栏式布局
Demo地址：http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/任务三：三栏式布局/index.html
