持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情
问题是这样的，需要将 box 宽度为 580px 的盒子中放 5 个小的 item，item的宽度为 100px，要求使用浮动流使得排布出如下效果：
看到后心想，这有啥难，css不就是调来调去嘛，我直接开始搞：
<style> .container { width: 580px; height: 300px; background-color: deeppink; } .item { float: left; width: 100px; height: 200px; background-color: skyblue; margin-right: 20px; } </style></head><body> <div class="container"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> <div class="item">item4</div> <div class="item">item5</div> </div></body>
操作完后发现如上的效果，突然回想起：**如果元素是向左（右）浮动，**浮动元素的左（右）边界不能超出包含块的左（右）边界。如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止。
奥，既然这样的话，原因清除是清楚了，那到底该怎么解决呢？这宽度少了 20px 我也不能自己加上去呀，再者就算自己加上去，貌似也效果就不一样了，右边就会多出一块红色的部分了，会影响美观的呀，那该怎么做呢？
还好最后收到点拨终于明白了，原来可以这么干，
当时看到这个就在想，我去，还能这么搞吗，至今才知道：margin可以设置为负值 （有可能以前也知道过，但是没注意也没用过给忘了）。
那么为什么可以这样呢？让我们打开浏览器看看，发现 box 的宽度竟然是 600px
这是为什么呢？明明 container 的 width 为 580px，box被包含在里面反而更大？
回过头又看了看盒子模型，终于找到了问题的答案：因为里面盒子没有padding 和 border，并且盒子的宽度没有设置，那就是auto，所以就会有： 宽度 + mr + ml 要等于外面盒子的宽度 580px，那么将 mr 设为 -20px 后，box 宽度自然就变为了 600px，这样加起来才会等于 container 的宽度。box 的 content 的 width其实是超出了 container 的。让我们给 box 加个高度和背景色看看。
发现确实如此，但是在实际开发中我们并不会给 box 设置高度，所以用户是看不到也不知道的，所以这样操作是没有问题的。
