9月4日作业，实例演示如何消除子元素浮动造成的父元素高度折叠等

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列式浮动。