css层浮动在上面

CSS层浮动是一种网页设计技术，可以让元素在页面中漂浮在其它元素之上。这种技术非常适合修饰整个页面的header和footer等元素。

.header{
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
}
.footer{
        position: fixed;
        z-index: 999;
        bottom: 0;
        left: 0;
        width: 100%;
}

在上面的代码中，我们使用了CSS的position属性使元素fixed定位。这使得header和footer元素可以随着网页滚动而固定在页面的最上或最下方。同时，为了确保这些元素在其他元素之上，我们使用了CSS的z-index属性设置了较高的值。

除了header和footer外，还可以使用CSS层浮动来设计导航栏、搜索框等元素。使用float属性，可以让一个元素浮动在另一个元素旁边。

.nav{
        float: left;
         width: 200px;
         height: 300px;
         background: #efefef;
}
.main-content{
        float: left;
         width: 800px;
         height: 300px;
         background: #f5f5f5;
 }

在上面的代码中，我们使用了CSS的float属性将.nav和.main-content浮动到左边。这使得它们能够自动排列在一行中，同时可以通过CSS属性设置它们的宽度和高度。另外，为了使页面内部没有空白，通常会在最后添加清除浮动的CSS样式。

.clearfix:after{
        content: ';
        display: block;
        clear: both;
}
    

这里，我们使用了CSS伪元素的after来添加清除浮动的样式。设置content属性为空、display属性为block、clear属性为both即可清除左右两侧的浮动。

在实际开发中，CSS层浮动技术可以帮助我们轻松实现页面的布局与样式，并提高网站的用户体验与设计效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！