CSS浮動是網頁設計中常見的技巧之一，可以實現布局的多樣化和獨特性。在浮動方向上，一般有左浮動和右浮動兩種方式。下面我們就來看一看CSS中的右浮動和左浮動到底有什么不同。

float: right;

右浮動，顧名思義就是將元素向右浮動。具體表現上，元素會脫離文檔流，但是仍然會占據原本的位置，然后向右移動，直到碰到父元素或者其他元素，然后就停止移動。右浮動的元素的左邊緣和包含它的塊框的右邊緣相接觸。

在下面的例子中，我們將兩個div元素都設置了浮動，其中一個右浮動，另一個左浮動。右浮動的元素有一個寬度和高度，而左浮動的元素只有寬度沒有高度：

<div style="float: right; width: 100px; height: 100px; background-color: red;"></div>
<div style="float: left; width: 100px; background-color: green;"></div>

<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" style="float: right; width: 50%;">

另外一個例子，我們在圖片上添加了右浮動，讓文章文字和圖片不再相互覆蓋：

float: left;

左浮動與右浮動的表現形式基本相同，但是移動的方向不同。左浮動的元素會脫離文檔流，向左邊移動，碰到父元素或者其他元素停止。同時，左浮動的元素的右邊緣和包含它的塊框的左邊緣相接觸。

下面我們再來看一下左浮動的實際應用。我們有一些段落需要圖片配合，但是圖片的寬度可能并不是段落正文的整個寬度，因此需要對圖片進行左浮動，使得段落內容可以快速地填充整個容器。

<p>這是一段文字，有圖片需要配合，而圖片大小并不是整個段落的寬度。</p>
<img src="https://cdn.pixabay.com/photo/2016/02/19/11/35/butterfly-1219849__480.jpg" style="float: left; margin: 0 10px 10px 0;">

這里我們給圖片加上了一些margin值，以配合文字進行左浮動布局。在實際應用中，float屬性的設置應該根據具體場景來調整，以達到更好的視覺效果。