三模块：盒子模型、浮动 、定位。上篇博客有讲到 盒子模型地址：

可以看出，因为div是块级元素，所以即使div2的宽度很小，页面中一行可以容下div2和div3，div3也不会排在div2后边，因为div元素是独占一行的。

那么我们再看下浮动的作用，这里我将div2浮动（对div2添加float:left;左浮动属性）

刷新页面

通过上下两张图片对比,我们可以直观感觉到，div2有种浮起来的感觉，从之前的平面到立体的感觉。也因为div2浮起来了，那么它之前所占的位置也就空出来了，

那么div3和div4就可以占据之前div2的位置，所以它们都往上移动了。这样我们最终看到的效果就是div2和div3，div4有重叠，而且div2是在最上层。

那如果这是我在把div3也设置左浮动呢 (对div3添加float:left;左浮动属性)

再次刷新页面

同样我们可以很直观的看到，因为div2和div3目前都是左浮动，所以它们的位置都空出来了，这个时候div4就可以往上移动，所以div2和div3都把div4部分给覆盖了。

通过上面示例，我们应该可以理解什么是浮动。这里附上上面示例的代码，可以自行再研究下

<!DOCTYPE html> <html>  <head>     <title>css浮动</title>     <style type="text/css">         div {            text-align: center;         }         .one {             background-color: gray;             width: 300px;             height: 50px;         }         .two {             background-color: yellow;             width: 100px;             height: 120px;             /*float:left;*/         }         .three {             background-color: red;             width: 150px;             height: 50px;             /*float:left;*/          }          .four {             background-color: green;             width: 300px;             height: 50px;         }     </style> </head>  <body>     <div class="one"> div1</div>     <div class=