浮動(dòng)布局是CSS中常用的一種布局方式，可以通過(guò)設(shè)置元素的浮動(dòng)屬性來(lái)實(shí)現(xiàn)。其中，浮動(dòng)屬性有四種：left（左浮動(dòng)），right（右浮動(dòng)），none（不浮動(dòng)）和inherit（繼承父元素的浮動(dòng)屬性）。在CSS1中，浮動(dòng)屬性只是用來(lái)實(shí)現(xiàn)文字環(huán)繞效果，但隨著CSS2的出現(xiàn)，浮動(dòng)屬性得到了進(jìn)一步的發(fā)展，可以用來(lái)實(shí)現(xiàn)復(fù)雜的網(wǎng)頁(yè)布局。

/* 實(shí)現(xiàn)左側(cè)導(dǎo)航欄，右側(cè)內(nèi)容區(qū)的經(jīng)典布局 */
nav {
float: left;
width: 200px;
}
main {
float: right;
width: calc(100% - 200px);
}

上面的代碼可以實(shí)現(xiàn)典型的左側(cè)導(dǎo)航欄，右側(cè)內(nèi)容區(qū)的布局效果。其中，nav元素和main元素都設(shè)置了float屬性，nav元素設(shè)置了left屬性，main元素設(shè)置了right屬性。同時(shí)，nav元素的寬度設(shè)置為200px，main元素的寬度設(shè)置為100%減去左側(cè)導(dǎo)航欄的寬度200px，這樣就保證了main元素始終占據(jù)剩余的空間。

/* 實(shí)現(xiàn)兩列等高布局 */
.container {
display: flex;
}
.left {
flex: 1;
float: left;
}
.right {
flex: 1;
float: right;
}

上面的代碼可以實(shí)現(xiàn)兩列等高布局效果。其中，.container元素設(shè)置了display:flex屬性，使其成為一個(gè)彈性盒子。.left元素和.right元素都設(shè)置了float屬性，但是同時(shí)又設(shè)置了flex:1屬性，使得它們?cè)?flex-container中分別占據(jù)相等的空間。這種布局方式既兼具了浮動(dòng)布局的自適應(yīng)性，又解決了浮動(dòng)元素高度塌陷等問(wèn)題。