CSS浮動是前端開發一項非常重要的技能。它可以實現網頁元素的布局和排版，使網頁看起來更加美觀和整潔。下面介紹8種常見的CSS浮動樣式，希望對大家有所幫助。

1. 左浮動

div{
float: left;
}

2. 右浮動

div{
float: right;
}

3. 清除浮動

.clearfix{
clear: both;
}

4. 居中浮動

div{
float: left;
margin: 0 auto;
}

5. 瀑布流布局-左右交替浮動

div:nth-child(odd){
float: left;
}
div:nth-child(even){
float: right;
}

6. 瀑布流布局-頂部浮動

div{
float: left;
}
.clearfix{
clear: both;
}

7. 多列布局

div{
float: left;
width: 33.33%;
}
.clearfix{
clear: both;
}

8. 自適應布局

div{
float: left;
width: 50%;
}
.clearfix{
clear: both;
}
@media only screen and (max-width: 767px) {
div{
width: 100%;
float: none;
}
}

總結

以上8種CSS浮動樣式都有各自的優點和應用場景。掌握了它們，就可以在實際開發過程中更加嫻熟地運用CSS布局和排版技巧，制作更優美和實用的網頁。