CSS课堂案例9-小米布局案例2

浮动元素经常和标准流父级搭配使用

小米布局案例

分析

大盒子里包括了四个盒子，盒子之间的距离相等
如下所示

过程中出现的问题：

1. 由于每个盒子之间有距离，一开始采用的是给每个盒子设置右外边距的方法，但是第四个盒子并不需要右外边距，导致了父盒子装不下

   解决方法：
   给第四个盒子单独设置，外边距为0，考虑到权重问题，应该设置为.box .last

<style>
        .box li {
            float: left;
            width: 296px;
            height: 285px;
            background-color: #22f;
            margin-right: 14px;
        }
        /*不能用.last，此时权重（0，0，1，0）没有上面的.box li（0，0，1，1）高 */
        .box .last {
            margin-right: 0;
        }
<style>

代码

<!