今天用div学习首页布局，整个页面分为三块，中间区域为红色（看不到，被覆盖）又分为两大块，绿色和紫色使用了float元素，将中间区域定义为父div，绿色和紫色分别为子div，当他们各自的高度出现变化时，呈现出来的页面布局会有什么变化？
首页布局
1、当子div高度低于父div时：
父div不会缩小，原本的底色也被落了出来
2、当子div高度高于父div时
子div不会被父div束缚，会按照原本设置的高度呈现，并将与父div同一辈的div挤出总的div
3、当父div高度低于原本的高度，宽度也比原来宽时
与红色同辈的黄色div被掩盖在绿色和紫色div之下
