在CSS中，浮動（float）和盒子模型（box model）是兩個不同的概念，它們各自有不同的用途和特性。
浮動（Float）
浮動主要用于控制元素在頁面上的水平排列方式。在CSS中，浮動允許元素脫離正常的文檔流，移動到其容器的左側或右側，并允許其他元素環(huán)繞它。浮動元素不再占據文檔流中的空間，而是浮動在文檔流之上，可能會與其他元素重疊，但文字會環(huán)繞浮動元素顯示。
使用浮動的一個常見場景是實現水平導航菜單或文字環(huán)繞圖片的效果。需要注意的是，浮動元素可能會導致父元素高度塌陷的問題，因此在使用浮動時，通常需要清除浮動，以確保父元素能夠正確包含其浮動子元素。
盒子模型（Box Model）
盒子模型是CSS布局的基礎，它規(guī)定了元素如何在頁面上顯示以及元素之間如何相互關聯(lián)。每個HTML元素都可以看作是一個矩形盒子，這個盒子由內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）四個部分組成。
通過調整這四個部分的尺寸和樣式，我們可以精確地控制元素在頁面上的布局和外觀。
浮動與盒子模型之間的區(qū)別
浮動和盒子模型在CSS中各自扮演著重要的角色，它們共同構成了CSS布局的基礎。通過靈活使用這兩個概念，我們可以創(chuàng)建出豐富多樣的頁面布局和視覺效果。
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>浮動與盒子模型示例</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”>
<div class="box float-left">
<p>這是一個左浮動的盒子</p>
</div>
<div class="box float-right">
<p>這是一個右浮動的盒子</p>
</div>
<div class="box">
<p>這是一個沒有浮動的盒子</p>
</div>
<div class="clearfix"></div> <!-- 用于清除浮動 -->
</div>
</body>
</html>
/* 盒子模型樣式 */
.box {
width: 200px; /* 盒子寬度 */
padding: 10px; /* 內邊距 */
border: 1px solid #ccc; /* 邊框 */
margin: 10px; /* 外邊距 */
background-color: #f4f4f4; /* 背景色 */
box-sizing: border-box; /* 盒子模型尺寸包含邊框和內邊距 */
}
/* 浮動樣式 */
.float-left {
float: left; /* 左浮動 */
}
.float-right {
float: right; /* 右浮動 */
}
/* 清除浮動 */
.clearfix::after {
content: "";
display: table;
clear: both;
}