CSS 三大特性、盒子模型、浮动

在CSS中，三大特性指的是层叠性、继承性和优先级。盒子模型包括内容区域（content）、填充区域（padding）、边框区域（border）、外边距区域（margin）。浮动是CSS中的一个属性，用于创建多列布局。

层叠性：当多个样式作用于同一个元素时，会根据样式的优先级来决定哪个样式最终生效。

继承性：某些CSS属性是可以被继承的，比如字体和颜色。

优先级：当多个选择器选中同一个元素，并且每个选择器都有自己的样式声明时，会根据选择器的权重来决定哪个样式最终生效。

盒子模型：

.box {
  content: 200px; /* 内容区域 */
  padding: 20px; /* 填充区域 */
  border: 1px solid black; /* 边框区域 */
  margin: 10px; /* 外边距区域 */
}

浮动：

.float-left {
  float: left; /* 元素向左浮动 */
}
 
.float-right {
  float: right; /* 元素向右浮动 */
}
 
.clearfix::after {
  content: "";
  display: table;
  clear: both; /* 清除浮动 */
}

使用时：

<div class="box float-left clearfix">内容</div>

以上代码展示了如何使用这些概念来创建一个左浮动的盒子，并使用clearfix来清除浮动，避免影响其他元素的布局。