CSS clear Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Container */
.container {
  max-width: 760px;
  margin: 24px auto;
  padding: 16px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  line-height: 1.4;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
}

/* Floating boxes */
.float-box {
  width: 160px;
  padding: 12px;
  color: #fff;
  margin: 10px;
  box-sizing: border-box;
  border-radius: 4px;
}

.float-box.left {
  float: left;
  background: #2b8a78;
}

.float-box.right {
  float: right;
  background: #d9534f;
}

/* Clear utility classes */
.clear {
  display: block;
  padding: 8px 12px;
  margin: 12px 0;
  background: #f3f4f6;
  color: #333;
  border: 1px dashed #d1d5db;
  border-radius: 4px;
}

.clear.left { clear: left; }
.clear.right { clear: right; }
.clear.both { clear: both; }
.clear.none { clear: none; }

/* Small reset so the container grows past floats when needed */
.container::after {
  content: '';
  display: table;
  clear: both;
}
</style></head><body><div class='container'>
  <h2>CSS clear examples</h2>

  <div class='float-box left'>Left float</div>
  <div class='float-box right'>Right float</div>

  <div class='clear both'>Cleared (both)</div>

  <p>Following content shows how cleared elements affect flow.</p>

  <div class='float-box left'>Left float 2</div>
  <div class='clear left'>Cleared (left)</div>

  <div class='float-box right'>Right float 2</div>
  <div class='clear right'>Cleared (right)</div>

  <div class='clear none'>No clear (none)  -  this sits beside floats if space allows</div>
</div></body></html>