Cacher is the code snippet organizer for pro developers

/*** cssにclearfix用のクラスを追加 ***/
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
/*** float確認用CSS ***/
.border {
  border: 8px solid green;
  width: 100%;
  margin-bottom: 20px;
  opacity: 0.8;
}
.left {
  float: left;
  width: 30%;
  height: 100px;
  background-color: red;
}
.right {
  float: right;
  width: 60%;
  height: 200px;
  background-color: yellow;
}
.bottom {
  width: 100%;
  height: 30px;
  background-color: blue;
}