HTML 是網頁的骨架，而 CSS 則為網頁添加了美感，其中 CSS 布局 float 和 p 也不容忽視。
float 布局用于元素的浮動。通過設置元素的 float 屬性，可以讓它脫離文檔流，向左或向右浮動。常見應用是實現文字環繞圖片的效果。
以下是 float 布局的實現代碼：

<style>
.box {
float: left;
width: 50%;
}
.image {
float: left;
margin-right: 20px;
}
</style>
<div class="box">
<div class="image">
<img src="image.jpg">
</div>
<p>這里是文字內容</p>
</div>

在上述代碼中，box 類設置了 float 屬性為左浮動，也就是讓它位于父元素左側。同時還設置了寬度為父元素寬度的一半，這樣可以在同一行中顯示兩個 box 元素。而 image 類則設置了左浮動和右側 20 像素的外邊距，以實現圖片與文字之間的間距效果。
另一個常用的標簽是 p，用于包裹段落文本信息。p 標簽可以用于排版美化，使文本顯得更加清晰易讀。
以下是 p 標簽的實現代碼：

<p>這里是一個段落的文本信息，可以是一段文字或者是一張圖片。也可以包含 <strong>加粗</strong> 和 <em>斜體</em> 等其他標簽。</p>

在該代碼中，p 標簽包裹了一段文字內容，并根據需要使用了其他標簽來加粗或斜體部分文本。p 標簽可以自動在文本上下方添加上下文間距，使文本更加整齊。
綜上，CSS 布局 float 和 p 都是實現網頁美化和效果實現的重要標簽，值得深入學習和掌握。