浮動（float）是CSS中非常重要的屬性，它可以讓元素脫離文檔流，并且使得元素可以左右移動，讓其他元素環繞在其周圍。

.container {
width: 600px;
}
.left {
float: left;
width: 200px;
height: 200px;
background: red;
}
.right {
float: right;
width: 200px;
height: 200px;
background: blue;
}

在上述代碼中，我們定義了一個容器（.container）和兩個浮動元素（.left和.right），.container的寬度為600px，.left和.right的寬度都是200px。

當我們給.left設置float: left;時，它就脫離了文檔流，并且向左浮動，直到碰到了第一個非浮動元素或浮動元素。在這個例子中，.left碰到了.container的邊緣，因此它停止了浮動，并且后面的元素都圍繞在它的周圍。

同樣地，當我們給.right設置float: right;時，它也脫離了文檔流，并且向右浮動，直到碰到了第一個非浮動元素或浮動元素。在這個例子中，.right碰到了.container的邊緣和.left的邊緣，因此它停止了浮動，并且后面的元素都圍繞在它的周圍。

需要注意的是，浮動元素的高度并不會撐開其父元素的高度，因此我們在使用浮動布局時，需要考慮清楚如何處理父元素的高度，以避免其他元素跑到父元素的下面。

總體來說，浮動是CSS布局中非常強大靈活的一種方式，可以幫助我們實現各種復雜的頁面布局效果。