Clear Fix

html .clearFix {height:1%;}
.clearFix:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

--------------------------------------------------------------------------------------------
.clearfix:after with pseudo-element :after, we add an extra content at the end of the div container
content: “.”; the content: a single point is enough
display: block; the generated content is converted into a block element as the css property clear can not be applied to an inline element
height: 0; its height is imposted to null to avoid visible space
clear: both; as explained before we apply the clear:both; to the generated content
visibility: hidden; the element is hidden
--------------------------------------------------------------------------------------------