关于浮动和边距的一个综合案例

那么，浮动和边距我们在上一篇文章中已经做出了一个详细的讲解。但是纯粹的理论知识点讲解可能对于新手来讲不是特别的容易理解。这里我就给大家写一个综合例子，来加深同学们对浮动和边距的理解。

首先，我们建立一个DIV盒子，盒子里有4个小div盒子：

给他们设立样式：

效果如下：

下面没有完全显示，但是展示的内容大家应该能想象出来，因为div是一个块级元素，在不加任何浮动的情况下，块级元素有独占一行的特性。
接下来，我们给这4个小div加上浮动。让他们平均的分配在黑色的div中：

效果如下：

我们可以看到，加了浮动以后，4个小div已经脱离了html的文档流。浮动到了黑色div的上方。这里有一个知识点，没加浮动之前，块级元素是独占一行的，等于说display:block。但是在加了浮动以后，display就变成了inline-block。也就是说并不是独占一行的。浮动会破坏当前的文档流。也会破坏元素的内部结构，这句话我在上文中给大家提到过。
那么如何证明这4个小div是浮动到黑色div的上方了呢？我们可以加入外间距margin来验证一下：

这边的margin:10px 采用了简写的格式。意思是上下左右都对外边距有10px的距离。效果如下：