CSS是前端開發中的重要組成部分，而其中的float和display屬性也是必不可少的。這兩個屬性可以幫助我們實現許多有趣的布局效果。

首先，讓我們來看看float屬性。Float屬性可以讓元素向左或者向右浮動，使它們脫離常規文檔流。這個屬性經常被用來實現多欄布局，其中的多個元素可以并排排列，而不需要用復雜的定位方式。比如：

.container {
overflow: auto; // 清除浮動
}
.container .left {
float: left;
width: 30%;
}
.container .right {
float: right;
width: 70%;
}

上述代碼中，我們使用了float屬性將左邊欄和右邊欄并排排列，而且兩個欄目的寬度是固定的。這樣做的好處是，當窗口大小改變的時候，布局也會自動適應。另外，通過添加clearfix類，可以很容易地清除浮動。下面是clearfix的代碼：

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

接下來，讓我們看看display屬性。這個屬性可以決定元素的顯示方式。其中display:flex屬性非常強大，它可以讓我們實現流動的布局，非常適合移動端頁面的設計。比如：

.container {
display: flex;
flex-direction: column; // 垂直排列
}
.container .item {
flex: 1; // 自動填充剩余空間
}

上述代碼中，我們將父元素的display屬性設置為了flex，然后指定了flex-direction為column，這樣子元素就可以垂直排列了。同時，我們將flex屬性設置為1，這樣每個子元素都會自動填充空余空間。這種方式非常方便，可以讓我們快速實現各種復雜的布局效果。

綜上所述，CSS中的float和display屬性非常強大，它們可以讓我們實現各種有趣的布局效果。了解它們和使用它們，可以讓你的網站變得更加美觀和靈活。