css元素浮动层次顺序 |css怎么纵向平铺

浮动元素的层次顺序和它们在HTML代码中的位置有关。后面的元素会覆盖前面的元素，这也就是所谓的“后来居上”规则。

下面是一个例子：

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
.container {
position: relative;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin-right: 50px;
z-index: 1;
}
.box2 {
float: left;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2;
}

在这个例子中，大家使用了两个浮动的div元素，并设置了它们的宽度、高度和背景颜色。大家还给box1添加了一个margin-right属性，让它和box2有一定的距离。

需要注意的是，大家还给box1和box2添加了z-index属性。这个属性指定了元素的层次顺序，数字越大则层次越高。

运行代码后，大家可以看到box2被放在了box1的上面，这是因为box2在HTML代码中位置更靠后，并且其z-index值更大。如果大家把box2的z-index值调小，则会发现box1会被放在box2的上面。

在实际应用中，大家需要注意浮动元素的层次顺序，并根据需要调整它们的z-index值。这样可以确保大家的布局正常显示，避免出现一些奇怪的问题。