CSS Float

Text around a box

float pulls a box to the left or right. Later content in the same block wraps beside it. Newspapers used this for a photo next to a paragraph. Harbor studio still uses it for a small tide chip beside a notice.

A floated box leaves normal flow for wrapping, but it is not quite the same as position: absolute. It still belongs to its parent. If every child is floated, the parent can collapse to zero height — that is why clear and a clearfix exist.

float: left and right

left tucks the box to the start of the line. right tucks it to the end. Text that follows fills the remaining side. A little margin keeps the wrap from kissing the chip.

<style>
  .chip {
    float: left;
    width: 5.5rem;
    margin: 0 0.75rem 0.5rem 0;
    padding: 0.6rem 0.5rem;
    background: teal;
    color: white;
    text-align: center;
  }
  .notice {
    color: #475569;
  }
</style>
<p class="notice">
  <span class="chip">Slip 4</span>
  Harbor studio opens 8–16 on the north quay. The sky gallery tour leaves from this slip. Bring a jacket
  if the teal dock is wet. Walk-ins wait at the lantern desk after 13:00.
</p>

clear stops the wrap

clear: left, right, or both tells a box not to sit beside a float. It drops below the float instead. Use both when you do not care which side the float used.

<style>
  .photo {
    float: right;
    width: 6rem;
    height: 4rem;
    margin: 0 0 0.5rem 0.75rem;
    background: #e0f2fe;
    border: 2px solid teal;
    color: #0369a1;
    text-align: center;
    line-height: 4rem;
  }
  .hours {
    clear: both;
    background: #ccfbf1;
    color: teal;
    padding: 0.5rem 0.75rem;
  }
</style>
<p class="photo">Sky</p>
<p>The sky gallery faces the water. Seats are unnumbered.</p>
<p class="hours">Hours 8–16 — this bar clears the float.</p>

Clearfix when the parent collapses

If a parent contains only floats, its height can collapse and the next section slides up. A clearfix forces the parent to wrap those floats. The modern one-liner is display: flow-root. Older sheets use an ::after with clear: both, or overflow: auto.

<style>
  .row {
    display: flow-root;
    background: #e0f2fe;
    border: 2px solid teal;
    padding: 0.75rem;
  }
  .berth {
    float: left;
    width: 6rem;
    margin-right: 0.5rem;
    padding: 0.5rem;
    background: teal;
    color: white;
  }
</style>
<div class="row">
  <div class="berth">Slip 4</div>
  <div class="berth">Slip 7</div>
</div>
<p>This sentence sits below the row because the parent contains the floats.</p>

Float versus modern layout