浮动元素排列规则

最新推荐文章于 2023-07-04 23:19:51 发布

原创最新推荐文章于 2023-07-04 23:19:51 发布 · 2.4k 阅读

7 ·

CC 4.0 BY-SA版权

HTML5 同时被 2 个专栏收录

5 篇文章

订阅专栏

CSS3

5 篇文章

订阅专栏

相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面。

    .box1 {
        float: left;
        width: 50px;
        height: 50px;
        background-color: red;
    }
    .box2 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .box3 {
        float: left;
        width: 150px;
        height: 150px;
        background-color: yellow;
    }
    .box4 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: tomato;
    }

显示效果如图：
这里写图片描述
如果将上述代码中float: left;属性改为float: right;那么效果如图：

不同方向上的浮动元素，左浮动找左浮动，右浮动找右浮动。

    .box1 {
        float: left;
        width: 50px;
        height: 50px;
        background-color: red;
    }
    .box2 {
        float: right;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .box3 {
        float: left;
        width: 150px;
        height: 150px;
        background-color: yellow;
    }
    .box4 {
        float: right;
        width: 200px;
        height: 200px;
        background-color: tomato;
    }

效果如下：
这里写图片描述

浮动元素浮动之后的位置，由浮动之前元素在标准流中的位置来确定。
```
     .box1 {
        float: left;
        width: 50px;
        height: 50px;
        background-color: red;
    }
    .box2 {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .box3 {
        float: left;
        width: 150px;
        height: 150px;
        background-color: yellow;
    }
    .box4 {
        width: 200px;
        height: 200px;
        background-color: tomato;
    }
```
显示效果如图：

首先，如果不给四个盒子设置浮动，他们是垂直排列下来的，因为div是块级元素，自己独占一行。可以知道，盒子1在没有浮动之前，处于标准流的第一行（记住，这里很重要）。当第一个盒子设置了浮动后，该盒子就脱标（脱离标准流），此时，第一个盒子就不会独占一行，那么下面的盒子就会自动上来，如图：

盒子2上来了，如图：

这时盒子1就开始浮动，因为前面说了，盒子1在脱标之前处于标准流的第一行，所以浮动后也会处于现在标准流的第一行。又根据规则1可知，前面没有浮动，所以盒子1覆盖了盒子2，如图：

这个时候，盒子三处于整个body的第二行，也就是在标准流中处于第二行（记住这里，很重要）。这时盒子三开始浮动脱标，如图：

所以盒子4就会上来，如图：

因为盒子三在脱标之前处于标准流的第二行，所以现在浮动后，也是在标准流第二行的位置浮动，不会跑到第一行盒子1后面浮动，结果如图：