We can use the clear property
on the next element to clear
the effect of the float property.
However, we still have a problem.
If the floating element is taller
than its parent, it overflows
the parent's boundaries.
Look at the example given below:
There are many ways to solve this problem.
However, the most common method used is
to add a class clearfix to the parent
of the floating element and define the
following properties using
::after:
Look at the solution given below:
In this case, we don't have
to use clear on the next
element. We'll
learn about ::after
in an upcoming lesson.