HTML環繞式布局作為一種流行的網頁布局方式，它是通過將文本或其他內容放置在固定的容器中，然后再通過CSS樣式來控制內容的位置和大小，以獲得美觀的網頁外觀效果。在這種布局方式中，不同元素的位置和大小可以自由調整，從而使網頁布局更加靈活和多樣化。

.container {
width: 800px;
margin: 0 auto;
}
.header {
height: 60px;
background-color: #333;
color: #fff;
}
.menu {
width: 200px;
float: left;
}
.content {
width: 600px;
float: left;
}
.footer {
height: 100px;
background-color: #333;
color: #fff;
clear: both;
}

以上是一個簡單的HTML環繞式布局代碼示例。在這個布局中，我們使用了一個名為“container”的容器來包含整個頁面的內容，并設置容器的寬度和居中。在容器中，我們分別制作了一個名為“header”的頭部、一個名為“menu”的菜單、一個名為“content”的內容和一個名為“footer”的底部。我們通過設置各元素的寬度和高度，以及使用浮動和清除屬性來將它們放置在適當的位置。通過調整各元素的CSS樣式，我們可以輕松地改變它們的位置和外觀，以適應不同的布局需求。