Why clear: right doesn't work as intended

Question

I\'m always confused by clear: left, clear: right and clear: both in CSS. I know clear: both means it doesn\'t allow floating

Answer 1

You can have a clear that works after the div if you use:

.clr::after
{
 content: "";
 clear: both;
 display: block;
 height: 0;
 visibility: hidden;
}