class属性中的空格是为了给html标签同时赋予多个class类名

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>Lesson 3 float</title>
  <meta name="description" content="一起学习float的使用方法">
  <link rel="stylesheet" href="./float.css">
</head>

<body>
  <div class="box float">1</div>
  <div class="box float">2</div>
  <div class="box float">3</div>
  <div class="box float">4</div>
  <div class="box float">5</div>
  <div class="box float">6</div>
  <div class="box float">7</div>
  <div class="box float">8</div>
  <p class="clear">float练习中, 我想解除包围状态!</p>
</body>
</html>

CSS

@charset "utf-8";

.box {
  width: 150px;
  height: 150px;
  margin: 50px;
  background-color: #888;
  color: #FFF;
  font-size: 3em;
}

p {
  font-size: 2em;
}

.float {
  float:left;
}

.clear{
    clear:both;
}

class="box float"

这里class空格隔开后,它们所代表的是两个类名,分别为boxfloat

两个类有重复属性定义,那么后面的会覆盖前面的

id不允许重复

Last modification:February 19th, 2021 at 02:57 pm