馬尾CSS船是一種常用的CSS布局技術(shù)，它可以將HTML文檔中的內(nèi)容分為三個(gè)區(qū)域：頭部、主體和底部。

/* 馬尾CSS船示例 */
.container {
display: flex; /* 使用flex布局 */
flex-direction: column; /* 垂直方向排列 */
height: 100vh; /* 高度設(shè)置為100%視窗高度 */
}
.header {
height: 80px; /* 頭部高度 */
background-color: #333; /* 頭部背景色 */
}
.body {
flex: 1; /* 主體區(qū)域占據(jù)剩余空間 */
}
.footer {
height: 50px; /* 底部高度 */
background-color: #666; /* 底部背景色 */
}

上面的代碼中，我們首先創(chuàng)建了一個(gè)名為“container”的容器。然后，我們使用flex布局，并設(shè)置了垂直排列。接著，我們?cè)O(shè)置了容器的高度為100%視窗高度。

在容器中，我們創(chuàng)建了三個(gè)子元素：“header”頭部、“body”主體和“footer”底部。

頭部元素的高度為80像素，背景色為深灰色。底部元素的高度為50像素，背景色為淺灰色。

主體元素則是靈活伸縮的，會(huì)占據(jù)剩余的空間。這樣，無論文檔內(nèi)容有多少，都不會(huì)影響整個(gè)布局的結(jié)構(gòu)。

總之，馬尾CSS船是一種靈活、簡(jiǎn)單且易于維護(hù)的布局技術(shù)，它為我們提供了一種有效的方法來組織頁面內(nèi)容。