Page 177 - CSS

.cf:after {
clear: both;
}

Clearfix with support of outdated browsers

IE6 and IE7

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

.cf:after {
clear: both;
}

/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}

Codepen showing clearfix effect

Other resource: Everything you know about clearfix is wrong (clearfix and BFC - Block Formatting
Context while hasLayout relates to outdated browsers IE6 maybe 7)

In-line DIV using float

The div is a block-level element, i.e it occupies the whole of the page width and the siblings are
place one below the other irrespective of their width.

<div>
<p>This is DIV 1</p>
</div>
<div>
<p>This is DIV 2</p>
</div>

The output of the following code will be

https://riptutorial.com/ 155