.float-left {
  float: left;
  margin-right: 20px;
}

.float-right {
  float: right;
  margin-left: 20px;
}

.no-float {
  float: none; /* Default */
}

.article-image {
  float: left;
  width: 300px;
  margin: 0 20px 20px 0;
}

.article-image-right {
  float: right;
  width: 300px;
  margin: 0 0 20px 20px;
}

.clear-left {
  clear: left; /* Clear left floats */
}

.clear-right {
  clear: right; /* Clear right floats */
}

.clear-both {
  clear: both; /* Clear all floats */
}

/* Modern clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Alternative */
.container {
  overflow: auto;
}

/* Two-column layout */
.sidebar {
  float: left;
  width: 30%;
}

.main {
  float: right;
  width: 65%;
}

.container::after {
  content: "";
  display: table;
  clear: both;
}

/* Problem: floated children cause parent to collapse */
.parent {
  /* Solution 1: clearfix */
}

.parent::after {
  content: "";
  display: table;
  clear: both;
}

/* Solution 2: overflow */
.parent {
  overflow: auto;
}

.floated {
  float: left;
  /* Margins don't collapse on floated elements */
  margin: 20px;
}

.article {
  max-width: 800px;
  margin: 0 auto;
}

.article img {
  float: left;
  max-width: 40%;
  margin: 0 20px 20px 0;
  border-radius: 8px;
}

.article::after {
  content: "";
  display: table;
  clear: both;
}