CSS中的浮動是很有用的，它允許我們實現元素的左右浮動。但是如何在計算位置時準確地掌握浮動元素的位置呢？讓我們開始吧！

// HTML代碼
<div class="container">
<div class="left">這個是左邊的浮動元素</div>
<div class="right">這個是右邊的浮動元素</div>
<div class="clear"></div>
</div>
// CSS代碼
.container {
width: 800px;
margin: 0 auto;
}
.left {
float: left;
width: 200px;
height: 200px;
}
.right {
float: right;
width: 200px;
height: 200px;
}
.clear{
clear:both;
}

首先，需要一個外層容器，我們要給它設置寬度“width:800px;”和居中對齊“margin:0 auto;”。然后分別在容器中插入左右兩個元素，這里我們使用了class=“left”和class=“right”兩個類來命名它們。設置元素的浮動屬性“float:left;”和“float:right;”之后，再給它們設置寬度和高度。

注意，為了避免浮動元素的高度塌陷，我們需要在外層容器的末尾添加一個class=“clear”的空白元素，它的樣式設置為“clear:both;”來清除左右浮動的影響。

在這個例子中，左右兩個浮動元素的寬度都為200px，外層容器的寬度為800px，那么剩下的“400px”就是可用空間。當左邊的元素浮動在左側時，右邊的元素會自動占據可用空間的地方，同樣，當右邊的元素浮動在右側時，左邊的元素也會自動占據剩余空間的地方，因此，兩個元素的位置總是會根據可用空間的大小來自動計算。

讓我們試一下吧！修改浮動元素寬度和外層容器寬度的數值，觀察它們的位置變化。你將發現，無論寬度如何，浮動元素都能自動地在它們的空間內排列。左浮動元素在左側，右浮動元素在右側。