CSS中有許多樣式可以讓我們對網頁中的元素進行布局。其中比較常用的一種是float樣式。

float樣式可以使元素脫離文本流，向左或向右“漂浮”，直到遇到另一個元素或父元素的邊緣。這個樣式最常用的情形就是將文字環繞在圖片周圍，同時還可以實現多欄布局和導航菜單的橫向排列。

img {
float: left;
margin-right: 10px; /*讓圖片周圍留出一些縫隙*/
}

需要注意的是，使用float樣式后要給自己留出一條后路。由于浮動元素已經脫離了文本流，有可能對其周圍的元素造成影響，使得布局混亂。因此，我們需要讓這個元素后面的元素清除浮動，如下：

div:after {
content: "";
display: block;
clear: both;
}

其中的:after偽元素可以在目標元素的末尾插入一些內容或修飾，而clear樣式可以指定在該偽元素之前的元素清除浮動。

除了上述的清除浮動方法，還可以將浮動元素的父元素設置為clearfix類（一種常用的清除浮動的方法），如下：

.clearfix::after {
content: "";
display: block;
clear: both;
}
.container {
width: 960px;
margin: 0 auto;
background-color: #f2f2f2;
padding: 20px;
/* 清除子元素浮動 */
overflow: auto;
}
.float-left {
float: left;
width: 300px;
height: 200px;
background-color: #fff;
margin-right: 20px;
}
.float-right {
float: right;
width: 600px;
height: 400px;
background-color: #fff;
}

使用float樣式可以更好地控制網頁布局，但同時也需要注意浮動元素對周圍元素的影響。