CSS浮動是頁面布局中常用的一種方式，它可以讓元素沿著一個方向移動，同時不影響其他元素的位置。在實際應用中，CSS浮動主要用于實現網站頁面中的導航菜單、圖片列表以及分欄布局等設計。

.cont{
width: 960px;
margin: 0 auto;
}
.left{
width: 200px;
float: left;
}
.right{
width: 760px;
float: right;
}

上述代碼中，我們定義了一個居中容器.cont，其中包含左浮動元素.left和右浮動元素.right。這樣做的好處是，無論我們給.cont容器加上任何元素，都能夠自適應左右兩側的空白區域。

除此之外，CSS浮動還可以實現圖片環繞文本的效果。例如：

img{
float: left;
margin-right: 10px;
}

上述代碼中，我們定義了圖片浮動到左側，并且是將文字環繞在圖片周圍。這樣做的效果是比較自然的，讓頁面看起來更加豐富和有趣。

當然，CSS浮動也有一些容易導致問題的地方，如高度塌陷、清除浮動等。這些問題都可以通過一些技巧或者特定的屬性解決。例如：

.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility:hidden;
}
.clearfix{
zoom:1;
}

上述代碼中，我們使用了 clearfix 類，能夠解決在容器中使用浮動時導致的高度問題和容器不能自適應的問題。靠在后置的 :after 偽元素引入一個空元素，然后設置 clear 屬性，這樣就可以清除浮動。同時，對觸發 hasLayout（IE語法）的元素進行 zoom 屬性設置，讓浮動元素的父級容器能夠自適應浮動元素。

總之，CSS浮動雖然經常導致一些問題，但是在實際應用中還是非常常用的一種方式。只要我們在掌握了 CSS浮動的一些技巧和要點，就可以在頁面布局中輕松運用它，讓整個頁面更加豐富和多樣化。