CSS 盒子模型 浮动 定位 字体图标

CSS盒子模型：

.box {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #000;
}

CSS浮动：

.float-left {
  float: left;
  clear: left;
}
 
.float-right {
  float: right;
  clear: right;
}

CSS定位：

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}
 
.absolute {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}

字体图标（使用Font Awesome作为例子）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
 
<i class="fas fa-user"></i> <!-- 用户图标 -->
<i class="fas fa-check"></i> <!-- 对勾图标 -->
<i class="fas fa-times"></i> <!-- 叉号图标 -->

这些代码片段展示了如何使用CSS来控制盒子模型的布局，使用浮动属性来处理浮动元素，以及如何使用定位来精确放置元素，并且如何使用字体图标库（如Font Awesome）来添加图标。