HTML與CSS布局方式是網頁設計中非常重要和常用的技術之一。HTML（Hypertext Markup Language）作為網頁結構的語言，負責定義文檔的結構和內容；CSS（Cascading Style Sheets）則為網頁提供了樣式和布局屬性，負責定義文檔的外觀和樣式。 HTML的布局方式主要依靠標簽屬性來實現，比較常用的布局標簽包括：div、span、table、ul、ol等。其中，div和span是最為常用的布局標簽，可以將頁面分成多個不同的區域進行布局。在使用div和span布局時，通常會使用id和class選擇器來定義樣式屬性，以實現不同布局區域的樣式和排版。 例如，在使用div布局時，可以將一個頁面分成左右布局和上下布局兩種方式。左右布局可以使用float屬性實現，如下示例代碼：

<div style="float: left; width: 50%;">
左側布局區域
</div>
<div style="float: right; width: 50%;">
右側布局區域
</div>

而上下布局則可以使用position屬性實現，如下示例代碼：

<div style="position: absolute; top: 0; left: 0; width: 100%;">
上方布局區域
</div>
<div style="position: absolute; top: 50px; left: 0; width: 100%; height: 100px;">
中間布局區域
</div>
<div style="position: absolute; bottom: 0; left: 0; width: 100%;">
下方布局區域
</div>

CSS的布局方式則依靠樣式屬性來實現，比較常用的布局屬性包括：position、display、float、clear、margin、padding等。其中，position和display是最為常用的布局屬性，可以定義元素的位置和樣式排版。 例如，在使用position布局時，可以將一個元素定位到頁面的指定位置。常用的position屬性包括：static、relative、absolute、fixed等。示例代碼如下：

<div style="position: relative;">
<div style="position: absolute; left: 0; top: 0;">
絕對定位元素
</div>
</div>

而在使用display布局時，可以定義元素的顯示方式，如inline、block、inline-block等。示例代碼如下：

<div style="display: inline-block; width: 100px; height: 100px;">
內聯塊元素
</div>
<div style="display: inline-block; width: 100px; height: 100px;">
內聯塊元素
</div>

總之，HTML與CSS布局方式的靈活運用，可以讓網頁設計更加美觀、實用和便捷。