css的盒子模型浮动(css怎么让盒子浮在下面)

导语：彻底搞清楚css盒子浮动（一）

盒子是由div块组成的，作为块级元素在页面中肯定是独占一行的，也被称为流；

图中可以看出不管盒子的大小如何，都是独占一行；这样的布局是不可能满足我们的页面布局的，那么我们如何让盒子脱离标准流，可以随我们任意摆布呢，这时候我们便用到了浮动。

我们将第三个盒子设置浮动

此时盒子3不在独占一行，而是浮动于标准流之上，盒子4向上移动，此时的盒子3漂浮于盒子4之上，因此盒子4被遮挡住了一部分。

我们将盒子3右浮动，此时盒子4将不被遮挡，其余三个仍然处于标准流之中。

下面我们将盒子2和盒子3都左浮动

此时我们看到盒子2、3处于同一行并排显示，而盒子4由于被浮动遮挡，完全看不见了；这里可以告诉读者的是，如果一行足够显示盒子2、3时会在同一行显示，如果放不下，则会另起一行；

现在我们把后面三个盒子都设置浮动

得出结论：先从盒子4开始分析，它发现上边的元素div3是浮动的，所以盒子4会跟随在盒子3之后；盒子3发现上边的元素盒子2也是浮动的，所以盒子3会跟随在盒子2之后；而盒子2发现上边的元素盒子1是标准流中的元素，因此div2的相对垂直位置不变，顶部仍然和盒子1元素的底部对齐。由于是左浮动，左边靠近页面边缘，所以左边是前，因此盒子2在最左边。

设置成右浮动

道理和左浮动基本一样，只不过需要注意一下前后对应关系。由于是右浮动，因此右边靠近页面边缘，所以右边是前，因此盒子2在最右边。

此时盒子浮动的基本原理和组织情况基本清楚，后面再给大家补充，对于盒子的浮动清除下回分解。

本文内容由小萱整理编辑！