【8.0】CSS之盒子模型和浮动

CSS盒子模型和浮动是网页布局的基础。CSS盒子模型由四个部分组成：margin（外边距）、border（边框）、padding（内边距）和content（内容）。浮动可以使元素脱离正常的文档流，从而允许文本和内联元素环绕它。

以下是简单的代码示例：

/* 设置盒子模型 */
.box {
  width: 300px; /* 内容宽度 */
  height: 200px; /* 内容高度 */
  padding: 20px; /* 内边距 */
  border: 5px solid blue; /* 边框 */
  margin: 10px; /* 外边距 */
  background-color: lightblue; /* 背景颜色 */
}
 
/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
 
/* 使用浮动进行布局 */
.float-left {
  float: left; /* 元素向左浮动 */
  margin-right: 10px; /* 右外边距 */
}
 
.float-right {
  float: right; /* 元素向右浮动 */
  margin-left: 10px; /* 左外边距 */
}

<!-- 盒子模型示例 -->
<div class="box">Box Model Example</div>
 
<!-- 使用浮动进行布局 -->
<div class="float-left box">Float Left</div>
<div class="float-right box">Float Right</div>
 
<!-- 清除浮动 -->
<div class="clearfix"></div>

在这个例子中，.box 类定义了一个具有背景颜色和边框的盒子模型。.float-left 和 .float-right 类使元素浮动到左侧或右侧，并设置了外边距以保持元素之间的距离。.clearfix 类用于清除浮动，确保父元素包含所有浮动的子元素。