CSS三欄布局設計是前端開發中的常見要求之一。通過CSS的盒模型和浮動等屬性，可以輕松實現一個左邊欄、右邊欄和中間內容區域的網頁布局。

.container {
width: 100%;
overflow: hidden;
}
.left-column {
width: 20%;
float: left;
}
.right-column {
width: 20%;
float: right;
}
.content {
width: 60%;
margin: 0 auto;
}
/* 清除浮動 */
.clearfix::after {
content: "";
display: block;
clear: both;
}

上述代碼中，.container是一個容器元素，寬度設為100%并設置了overflow:hidden屬性，以防止內容溢出。.left-column和.right-column元素分別代表左邊和右邊的欄目，寬度都設為了20%，并通過float屬性實現了左右浮動。.content元素是中間的內容區域，寬度設置為了60%，并通過margin: 0 auto實現了水平居中。

最后，為了清除浮動而添加的clearfix偽元素，可以有效解決由浮動元素所引起的父容器高度塌陷問題。