Page 176 - CSS

Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>
<p class="clear">Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum
Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>

</body>
</html>

Clearfix

The clearfix hack is a popular way to contain floats (N. Gallagher aka @necolas)

Not to be confused with the clear property, clearfix is a concept (that is also related to floats, thus
the possible confusion). To contain floats, you've to add .cf or .clearfix class on the container (
the parent) and style this class with a few rules described below.

3 versions with slightly different effects (sources :A new micro clearfix hack by N. Gallagher and
clearfix reloaded by T. J. Koblentz):

Clearfix (with top margin collapsing of

contained floats still occurring)

.cf:after {
content: "";
display: table;
}

.cf:after {
clear: both;
}

Clearfix also preventing top margin

collapsing of contained floats

/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}

https://riptutorial.com/ 154