div浮動位置是指使用CSS的float屬性來控制網頁中div元素的位置。浮動可以使元素向左或向右移動，直到它的邊緣碰到包含它的容器或另一個浮動元素的邊緣才停止。通過浮動，可以實現網頁布局中的很多效果，比如實現多列布局、文字環繞圖片等。
一、左浮動 <div class="container"> <div class="leftFloated">

這是一個左浮動的div元素。

</div> <div class="content">

這是頁面的主要內容。

</div> </div>
CSS代碼： <style> .container { width: 500px; }
.leftFloated { float: left; width: 200px; margin-right: 10px; }
.content { float: none; width: 280px; } </style>
在這個例子中，我們創建了一個容器div，并且定義了.container樣式，設置其寬度為500像素。內部包含了兩個div元素，一個是左浮動的.leftFloated，另一個是.content。 .leftFloated的樣式設置了浮動為向左浮動，并定義了寬度為200像素，并且設置了右邊距為10像素。 .content的樣式設置了浮動為不浮動（默認值為none），和.leftFloated并排顯示。
二、右浮動 <div class="container"> <div class="content">

這是頁面的主要內容。

</div> <div class="rightFloated">

這是一個右浮動的div元素。

</div> </div>
CSS代碼： <style> .container { width: 500px; }
.rightFloated { float: right; width: 200px; margin-left: 10px; }
.content { float: none; width: 280px; } </style>
在這個例子中，我們將右浮動.div元素放置在浮動前的位置。
三、清除浮動 浮動會造成其后內容被浮動元素遮擋的問題，為了解決這個問題，可以使用clear屬性來清除浮動。
<div class="container"> <div class="leftFloated">

這是一個左浮動的div元素。

</div> <div class="clear"></div> <div class="content">

這是頁面的主要內容。

</div> </div>
CSS代碼： <style> .container { width: 500px; }
.leftFloated { float: left; width: 200px; margin-right: 10px; }
.content { float: none; width: 280px; }
.clear { clear: both; } </style>
在這個例子中，我們在.leftFloated浮動元素后面添加了一個class為clear的div元素，并設置其樣式為clear:both。這樣就能夠清除前面浮動元素對后續內容的影響。
： 通過使用div浮動位置，可以實現網頁布局中的多列布局和文字環繞圖片等效果。通過設置浮動屬性和寬度屬性，可以控制div元素的浮動方向和寬度。同時，為了解決浮動元素產生的問題，可以使用clear屬性來清除浮動。在實際的網頁開發中，我們經常會使用div浮動位置來實現復雜的頁面布局，提高用戶體驗和頁面可讀性。