how to clear floats
This is the code
.float-wrapper::after {
content: "";
clear: both;
display: block;
}
---------------------------------------------------------------
Explanation:
.float-wrapper -> is some parent element that wraps the floating items
example:
<div class='float-wrapper'>
<div class='floating-item'> </div>
<div class='floating-item'> </div>
....
</div>
::after adds an element after the .float-wrapper, that
has no content and clears floats from the both sides, making sure,
other sections are not affected by floats