第四节：使用盒子模型打造照片墙布局
同样还是以前的方法，我们先行后列，一步一步的使用盒子模型及浮动流来设置我们的照片墙布局。
第一行中的三列
<!-- 行1 -->
<div>
<!-- 1.1 -->
<div style="float:left;">
<!-- 1.1.1 -->
<div>
<!-- 1.1.1.1 -->
<div>照片1</div>
<!-- 1.1.1.2 -->
<div>照片2</div>
</div>
<!-- 1.1.2 -->
<div>照片3</div>
</div>
<!-- 1.2 -->
<div style="float:left;">
<!-- 1.2.1 -->
<div>照片4</div>
<!-- 1.2.2 -->
<div>照片5</div>
</div>
<!-- 1.3 -->
<div style="float:left;">照片6</div>
<!-- clear -->
<div style="clear: left;"></div>
</div>
最后的<div style="clear: left;"></div>由于高度为0，所以并没有出现在我们的视野中，但却启到了自动设置父盒子高度的作用。如果没有它，你看到的布局会是这样：
这是由于第一行中的盒子全部为浮动盒子，这使得 行1 认为：自己根本就没有子盒子，所以把自己的高度设置为0。那么对于 行2 而言，行1 的高度为0, 即不存在。所以其子元素直接排在了第一行，第二行，第三行，第四行的位置上。
第二行中的四列
<!-- 行2 -->
<div>
<!-- 2.1 -->
<div style="float: left;">照片7</div>
<!-- 2.2 -->
<div style="float: left;">照片8</div>
<!-- 2.3 -->
<div style="float: left;">照片9</div>
<!-- 2.4 -->
<div style="float: left;">照片10</div>
<!-- clear -->
<div style="clear: left;"></div>
</div>
拆分1.1.1
<!-- 1.1.1 -->
<div>
<!-- 1.1.1.1 -->
<div style="float: left;">照片1</div>
<!-- 1.1.1.2 -->
<div style="float: left;">照片2</div>
<!-- clear -->
<div style="clear: left;"></div>
</div>