body {
  background: aliceblue;
}

main {
  background: white;
}

article {
  border: 1px solid black;
  margin: 0.5rem;
  min-height: 110px;
  padding: 0.5rem;
}

.left-block {
  background: rgba(0, 0, 255, 0.6);
  float: left;
  padding: 0.2rem;
  width: 30px;
  height: 100px;
}

.right-block {
  background: rgba(255, 0, 0, 0.6);
  float: right;
  padding: 0.2rem;
  width: 40px;
  height: 50px;
}

article p:first-of-type::before {
  content: "This paragraph is not cleared. ";
  font-style: italic;
}

article.top-article:target p:first-of-type {
  clear: left;
}

article.top-article:target p:first-of-type::before {
  content: "This paragraph is cleared to the left. ";
  font-style: normal;
  font-weight: bold;
}

article.middle-article:target p:first-of-type {
  clear: right;
}

article.middle-article:target p:first-of-type::before {
  content: "This paragraph is cleared to the right. ";
  font-style: normal;
  font-weight: bold;
}

article.bottom-article:target p:first-of-type {
  clear: both;
}

article.bottom-article:target p:first-of-type::before {
  content: "This paragraph is cleared both left and right. ";
  font-style: normal;
  font-weight: bold;
}