CSS中的float屬性用于決定元素在頁面中的位置。設(shè)定了float屬性的元素將會跨越頁面上其它元素。該屬性的值可以為left、right和none（默認(rèn)值）。

.example {
float: left; /* 該元素將被浮動到左側(cè) */
}

經(jīng)常使用float屬性的元素包括圖片和文本塊。通過浮動圖片，可以讓文本環(huán)繞它。通過浮動文本塊，可以與周圍的元素區(qū)別開來，形成兩列或多列的布局。請注意，浮動的元素將不再占據(jù)原本在文檔流中的空間。

img {
float: right; /* 該圖片將被浮動到右側(cè) */
}
.text-block {
float: left;
width: 50%; /* 將當(dāng)前元素的寬度設(shè)為父元素的50% */
}

由于浮動會導(dǎo)致元素跨越其它元素，因此在使用float屬性時，應(yīng)該注意元素的高度和寬度。一旦浮動的元素高于其它元素，就需要清除浮動以恢復(fù)其在文檔流中的正常位置。

.clearfix::after {
content: ""; /* 聲明為一個偽元素，不能漏寫 */
display: block; /* 設(shè)為塊級元素，以接下來的clear屬性生效 */
clear: both; /* 清除浮動 */
}