float removes element from the normal document flow. The floater goes to parent's edge at left or right while siblings will wrap around it. If cannot fit, goes to next available edge down.

.to-left {
    float: left;
}

Clearing floats is necessary when:

1. floating elements can be taller than the non-floating siblings.
2. there are only floating elements in the parent.

Clearing floats using an empty element.

.clear-here {
    clear: both;
}

<div>
    <img src="*" class="to-left">
    <p>Lorem ipsum dolor est.</p>
    <div class="clear-here"></div>
</div>

Clearing floats using a class in the parent.

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

<div class="clearfix">
    <img src="*" class="to-left">
    <p>Lorem ipsum dolor est.</p>
</div>

Sources

• Force Element To Self-Clear its Children