float & clear
A legacy layout method, now mainly used for wrapping text around images. For layouts, prefer df(flex) or dg(grid).
Class List
| Class | CSS | Description |
|---|---|---|
fl | float: left | Floats element left. Text wraps to the right |
fr | float: right | Floats element right. Text wraps to the left |
fn | float: none | Clears float. Returns to normal flow |
clb | clear: both | Clears all left and right floats |
cll | clear: left | Clears left float only |
clr | clear: right | Clears right float only |
cln | clear: none | Removes clear (default) |
Visual Comparison
Compares how float affects text flow.
Float Left — fl
The image floats left and text flows to the right. The most typical use case for float. If the text is long enough, it continues below the image. This is float's original purpose: text wrapping.
Float Right — fr
The image floats right and text flows to the left. Used for placing profile images or thumbnails on the right. Text flows naturally below when it exceeds the image height.
Problem when using float without clear
Without clear after float elements, the parent height collapses
Adding clb(clear: both) makes the parent properly wrap float elements
Why clear is needed
Floated elements leave the normal flow, so the parent cannot recognize the height of floated children. This causes the parent height to become 0 or following elements to overlap under float elements.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Solution | Class | Description |
|---|---|---|
| 빈 div로 clear | clb | Add <div class=\"clb\"></div> after float elements |
| 다음 요소에 clear | clb | Apply clb to the next block element after float |
| 부모에 overflow | oh | Create BFC with overflow: hidden on parent |
Class Details
flfloat: left
Floats the element to the left so following content wraps to the right. The traditional way to flow text around images.
<!-- Image left, text wrapping -->
<div class="oh">
<img class="fl mr16px mb8px w12rem" src="/photo.jpg" alt="Photo" />
<p>Image floats left, and this text flows to the
right of the image. When text is long, it continues
naturally below the image.</p>
</div>
<!-- Arrange multiple elements to the left -->
<div class="oh">
<div class="fl w10rem h10rem bg18181B mr16px br8px">1</div>
<div class="fl w10rem h10rem bg27272A mr16px br8px">2</div>
<div class="fl w10rem h10rem bg18181B br8px">3</div>
<div class="clb"></div>
</div>frfloat: right
Floats the element to the right so following content wraps to the left. Used for placing profile images, blockquotes, etc. on the right side.
<!-- Profile image right placement -->
<div class="oh">
<img class="fr ml16px mb8px w10rem br8px" src="/avatar.jpg" alt="Profile" />
<h3>User name</h3>
<p>Profile image floats right,
User info is displayed on the left.</p>
</div>fnfloat: none
Clears float to return the element to normal flow. Useful in responsive layouts where desktop uses float but mobile does not.
<!-- Responsive: desktop float, mobile disabled -->
<img class="fl sm-fn mr16px mb8px w12rem sm-w100p" src="/photo.jpg" />
<p>On desktop the image floats left,
on mobile the image displays full width.</p>
<div class="clb"></div>clbclear: both
Clears all left and right floats. Added as an empty div after float elements or applied to the next block element to block float influence. The most commonly used clear value.
<!-- Clear pattern after float -->
<div>
<div class="fl w50p bg18181B p2rem">Left area</div>
<div class="fl w50p bg27272A p2rem">Right area</div>
<div class="clb"></div>
</div>
<p>This text is positioned normally below the float area.</p>
<!-- Clear after image + text wrapping -->
<div>
<img class="fl mr16px mb8px" src="/photo.jpg" />
<p>Text flows beside the image...</p>
<div class="clb"></div>
</div>cllclear: left
Clears only left floats. Moves below left-floated elements while keeping right floats intact.
<!-- Clear left float only -->
<div class="fl w10rem h8rem bg6366F1 br4px mr16px">Left</div>
<div class="fr w10rem h8rem bg34D399 br4px ml16px">Right</div>
<div class="cll">This element moves below left float, but
can be positioned beside right float.</div>
<div class="clb"></div>clrclear: right
Clears only right floats. Moves below right-floated elements while keeping left floats intact.
<!-- Clear right float only -->
<div class="fl w10rem h8rem bg6366F1 br4px mr16px">Left</div>
<div class="fr w10rem h8rem bg34D399 br4px ml16px">Right</div>
<div class="clr">This element moves below right float, but
can be positioned beside left float.</div>
<div class="clb"></div>clnclear: none
Removes clear. Default value, used to revert clear set elsewhere.
<!-- Disable clear (responsive) -->
<div class="clb sm-cln">
Desktop: clear: both, mobile: clear disabled
</div>Tips & Notes
Use flex/grid for layouts
float is a legacy layout method. For 2-column or 3-column layouts, use df(flex) or dg(grid).
Still useful for text wrapping
Wrapping text around images is float's original purpose and a unique feature that cannot be replaced by flex/grid.
Always clear after float
After using float, add clb(clear: both). Apply clb to an empty div or set oh(overflow: hidden) on the parent.
Wrapping with overflow: hidden
Applying oh to the parent wraps floated children without clear. This is because it creates a BFC (Block Formatting Context).