Task goes on.

Task_1_3

任务描述

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

任务是比较经典的三栏布局，左右宽度固定，中间部分自适应。区域高度需要取决于三个子元素最高的高度，用浮动的方法来实现就需要消除子元素脱离文档流带来的父元素高度塌陷，即清除浮动。一下就想到了之前研究过的圣杯布局和双飞翼布局，不仅可以实现三栏布局，而且可以优先加载中间的主要内容。

任务注意事项

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

position 和 float 效果的异同

留坑以后填。

收获

双飞翼布局

之前研究过圣杯布局和双飞翼布局，并且写过一篇总结，这次算是又温习了一遍。其实对于这个任务来说，传统的左中右布局方式已经可以解决任务，但是精益求精总是好的。双飞翼布局的具体实现以及和圣杯布局的异同在此不再赘述，有兴趣的同学可以看我之前写过的总结。 双飞翼布局和圣杯布局学习笔记

清除浮动

用来解决父元素高度自适应高度最大的子元素。这个问题说大不大，说小也不小，往小了说，是脱离文档流造成了父元素高度塌陷，往大了说，就和半懂不懂的 BFC 扯上了关系。我所使用的方式如下，只需在浮动元素父元素添加伪类，无需额外标签，十分简洁优雅。

div:after{
	content: "";
	height: 0;
	display: block;
	visibility: none;
	clear: both;
}

建议想要深入了解的同学百度一下：那些年我们一起清除的浮动-一丝 这里就不放链接了，因为不知名的原因，这位大牛的博客链接失效了…

小结

这一任务初步实践了浮动以及清除浮动，总的来说比较基础，也再次温习了一下圣杯布局和双飞翼布局。

参考资料

我的 IFE 代码仓库