CSS浮動布局常常被用于設計網頁布局，尤其是當需要多個元素放在同一行時。浮動布局可以使得多個元素浮動到同一水平線上，并且可以通過調整元素的寬度來調整它們的位置，非常靈活。

浮動元素的盒子有一個重要的屬性叫做“clear”，它可以控制一個元素左側和右側不能出現浮動元素。

.clearfix:after {
content: "";
display: block;
clear: both;
}

為了使得盒子大小與內容的大小匹配，可以使用“box-sizing”屬性，這個屬性有兩個取值：“content-box”與“border-box”。使用“border-box”將使得border和padding被包含在盒子大小之內。

.box {
box-sizing: border-box;
width: 100%;
padding: 20px;
border: 1px solid gray;
}

使用浮動布局與盒子可以實現各種形式的網頁布局。要注意的是，浮動布局的元素必須要有寬度，否則它們會自適應父元素的寬度，而無法實現同一行的效果。