在 CSS 中，導航欄是一個非常基本的組件。無論你在開發哪種網站，都需要一個好看，易于使用的導航欄。但是，有時候，人們希望導航欄不隨著用戶滾動而浮動。在這篇文章中，我將和大家分享如何實現一個不浮動的導航欄。
首先，讓我們先了解一下什么是 CSS 中的浮動。當一個元素被設置為浮動時，它將會從正常的文檔流中脫離出來，并根據給定的方向找到位置。這使得元素可以像拼圖一樣拼成頁面，但會影響其他元素的布局。
要實現一個不浮動的導航欄，我們需要確保它保持在常規布局中，也就是說，確保它不會離開文檔流。這可以通過將導航欄設置為固定位置來實現。你可以使用 CSS 的 position 屬性將元素設置為固定位置。下面是一個基本的導航欄代碼示例：

nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 10px;
}

在這個示例中，我們將導航欄的位置設置為固定位置。通過指定 top: 0 和 left: 0 屬性，我們保證了導航欄的位置將在頁面最頂端。我們還設置了導航欄的寬度為100％，這將使其占滿整個頁面的寬度。
另外，我們可以添加 padding 屬性來調整導航欄的內邊距。在這個示例中，我們設置了 10 像素的內邊距。
總的來說，要實現一個不浮動的導航欄，只需將其設置為固定位置，并通過其他 CSS 屬性進行樣式設置即可。這使得導航欄保持在常規文檔布局中，同時仍然具有現代感和易于使用。