任务目标
- 掌握HTML/CSS布局的概念
- 掌握盒模型的概念
- 掌握position与float的概念以及在布局时的用法
任务描述
- 使用 HTML 与 CSS 按照 示例图（点击查看） 实现三栏式布局。
- 左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。
任务注意事项
- 尝试 position 和 float 的效果，思考它们的异同和应用场景。
- 注意测试不同情况，尤其是极端情况下的效果。
- 图片和文字内容请自行替换，尽可能体现团队的特色。
- 调节浏览器宽度，固定宽度和自适应宽度的效果始终符合预期。
- 改变中间一栏的内容长度，以确保在中间一栏较高和右边一栏较高时，父元素的高度始终为子元素中最高的高度。
- 其他效果图中给出的标识均被正确地实现。
任务完成及总结
关于这次任务的布局，我采用的三栏式流体布局，遇到一个匪夷所思的问题。
问题：盒子顺序为左、中、右，设置左右盒子浮动，中盒子用margin值撑开，右盒子并没有在中栏的旁边，而是跑到了下面。
问题解决：后来通过在网上查阅相关的资料才明白过来，为什么这种布局方式称之为流体布局。原因在于浮动是脱离文档流的，首先要让左右两栏的html代码出现，然后才能让中栏的内容“流”入它们之间的空间中。
更多三栏式布局内容以及详解请戳这里：
http://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95/
七种三栏式布局：
https://zhuanlan.zhihu.com/p/25070186?refer=learncoding
小demo亮点：
为了避免在极端宽度情况下盒子内容发现重叠和塌陷的情况，我在承载它们的父盒子中设置了最小宽度（min-width）。
小demo地址：
https://cruxf.github.io/BaiduTask/test3.html