1.例子引入
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin: 0;padding: 0;}.top{width: 1200px;height: 24px;margin: 0 auto;background-color: deeppink;}.botton{width: 1200px;height: 672px;margin: 0 auto;background-color: aliceblue;overflow: hidden;/* 清除浮动 */}.zuo{width: 87px;height: 672px;float: left;background-color: greenyellow; }.you{width: 1113px;height: 672px;float: left;background-color: darkgreen;}.shang{width: 1113px;height: 168px;background-color: cornflowerblue;}.left{width: 408px;height: 168px;background-color: yellow;float:left;}.right{width: 705px;height: 168px;background-color:orange;float:left;}.shang2{width: 408px;height: 111px;background-color: lightpink;}.xia2{width: 408px;height: 57px;background-color: blueviolet;}.xia{width: 1113px;height: 504px;background-color: deeppink;overflow: hidden;}.zuo1{width: 651px;height: 504px;background-color: yellow;float: left;}.zuo2{float: left;width: 30px;height: 504px;background-color: orchid;}.you2{float: left;width: 621px;height: 504px;background-color: cornflowerblue;}.shang3{width: 621px;height: 419px;background-color: darkgoldenrod;}.xia3{width: 621px;height: 85px;background-color: mediumspringgreen;}.you1{float:right;width: 462px;height: 504px;background-color: yellowgreen;}</style></head><body><div class="top"><img src="img/index_01.jpg"/></div><div class="botton"><div class="zuo"><img src="img/index_02.jpg"/></div><div class="you"><div class="shang"><div class="left"><div class="shang2"><img src="img/index_03.jpg"/></div><div class="xia2"><img src="img/index_05.jpg"/></div></div><div class="right"><img src="img/index_04.jpg"/></div></div><div class="xia"><div class="zuo1"><div class="zuo2"><img src="img/index_06.jpg"/></div><div class="you2"><div class="shang3"><img src="img/index_07.jpg"/></div><div class="xia3"><img src="img/index_09.jpg"/></div> </div> </div><div class="you1"><img src="img/index_08.jpg"/></div></div></div> </div> </body>
</html>
2.总结注意事项
①在做盒子模型时，先判断结构，在中，先进行结构排版，分清楚上下还是左右。记住结构永远大于样式
②填充图片时，可以给父级设置高度优先，防止出现由于子集浮动方式导致父级高度塌陷的问题（俗称父级高度塌陷）
若真出现父级高度塌陷的问题，可以使用overflow：hidden避免
③设置完结构后，在