9月4日作业:
1. 实例演示如何消除子元素浮动造成父元素高度折叠的影响
当父级元素包含（嵌入）子元素时，如果子元素存在浮动属性，可能会对父级元素产生影响，例如
<div class="box1"> <div class="box2"> 嵌套的子元素（区块） </div> </div>
.box1 {
width:300px;
border:5px dashed red;
}
.box2 {
width:inherit;
height:300px;
background-color:lightcoral;
float:left;
}如果此时，我们设置box2左浮动，那么box2将会脱离文档流，此时我们会发现box1将无法包含著box2
针对上述问题，现在有四种解决方案，包括：
a、因为box2浮动后直接脱离了文档流，所以此时box1的高度实际为空，box1无法包住box2，可以将box1高度设置为box2的高度，300px，即可实现包裹效果；
此方法并不建议，因为如果子元素的属性变化，需要反复修改父元素属性；
b、将父元素设置为和子元素一起浮动，例如将box1、box2都设置为float：left，此时box1和box2重叠，外观上看，实现了功能，但如果box1外另有父元素，需要设置每一级的父元素浮动，最后直至body层级，过于复杂且不利于开发；
此方法也不建议使用；
c、在子元素中，增加一个同级元素，该同级元素专门用于清除浮动，例如在上面例子box2同级增加一个div class=clear，属性值为clear：both；
此方法完全实现了目的，但因为增加了额外的dom元素，容易造成混乱，尤其是针对后端开发时，因此，同样不建议使用此方法。
d、直接给父元素增加overflow属性即可；
例如在上例中，为父级元素增加
.box1 {
overflow : hidden;
}
2. 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)
三列式布局，一般而言，页头和页脚部分通常固定不变，因此大多数的三列布局均只需要调整主体内容部分即可
如果采用浮动式布局，当子元素设置为浮动后，需要考虑父元素是否能够足够包括住子元素，在本例中，我们一定要在main类中设置overflow属性为hidden，可以更好的实现整体3列式浮动。
