在CSS中，浮動（float）是一種常見的布局方式。它允許元素在文檔流中“浮動”并自由移動到可用空間中。下面是CSS浮動的原理。

div {
float: left;
}

在上面的例子中，我們選擇了一個DIV元素并將其浮動到左側。這意味著它將在其前面的文本流中“浮動”，并移動到它左側的可用空間中。

浮動元素會從文本流中移除并放置在其父元素的邊緣上。它們可以被其他元素所環繞。例如，如果我們在上面的DIV元素后面添加一個段落元素，它將會環繞在該元素的右側：

<div>Lorem ipsum dolor sit amet...</div>
<p>Consectetur adipiscing elit. Nullam pharetra.</p>

在上述代碼中，段落元素將出現在DIV元素的右側，因為DIV元素已經浮動到其左側。這種環繞效果非常常見，特別是在設計類似文章布局這種單列或雙列的網站時。

需要注意的是，浮動元素將被從文檔流中移除，這可能影響它們父元素本身的高度。如果元素沒有設置高度，那么父元素將會塌陷并導致頁面布局問題。

因此，通常需要使用“清除浮動”（clear float）技術來解決這個問題。可以在需要清除浮動的元素之后添加一個空的元素并設置clear屬性：

.clear {
clear: both;
}
<div class="float-left">...</div>
<div class="float-right">...</div>
<div class="clear"></div>

在上面的代碼中，我們分別將兩個DIV元素浮動到左側和右側。然后，我們將清除浮動的DIV元素添加到它們后面，以確保其父元素不會被浮動元素所影響。

以上就是CSS中浮動的原理。無論是實現二列布局、三列布局、導航條還是其他常見的布局方式，都必須理解浮動的基本原理。它是CSS布局體系中最重要和最常用的布局方式之一。