CSS導航欄浮動是一種常見的網頁導航設計方式，常常用于在網頁中添加主導航或子導航。它簡單易用，可以通過一些簡單的CSS代碼添加到任何網站中。

<ul class="navigation">
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
.navigation {
float: left;
width: 100%;
background-color: #333;
}
.navigation li {
float: left;
margin-right: 30px;
}
.navigation li:last-child {
margin-right: 0;
}
.navigation li a {
color: #fff;
text-decoration: none;
padding: 10px;
display: block;
}
.navigation li a:hover {
background-color: #666;
}

在這個例子中，我們創建了一個ul元素并且添加了一個類名navigation。然后，我們為這個導航欄添加了樣式，將它浮動在瀏覽器窗口的左側，設置它的寬度為100%并且設置背景顏色為#333。接著，我們對導航欄中每個li元素添加了樣式，使它們浮動在左側并且設置它們之間的間距為30像素。最后，我們對所有的鏈接元素添加了樣式，包括了一個:hover狀態，以使當鼠標指針懸停在鏈接上時會有一個反饋效果。

這就是CSS導航欄浮動的基本概念。你可以通過修改CSS樣式來改變導航欄的外觀，并且可以使用JavaScript或jQuery等腳本語言來添加更多的交互效果。這個技術被廣泛使用，可以輕松地創建美觀、易于使用的導航欄。