I have some very simple HTML and CSS: https://jsfiddle.net/79gdnyt1/8/
HTML
<div><img src="http://placehold.it/120x110"><span>This text will wrap around the image.</span><span class="clear">This text isn't allowed to wrap around floated elements, and therefore will render underneath them.</span></div>CSS
img {float: right;}.clear {clear: right;}Why is the element with the class clear not displaying underneath the floated image?
Best Answer
clear only applies to block-level elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/clear
Initial value none
Applies to block-level elements
Inherited no
Media visual
div {background: #888;padding: 15px;}img {float: right;margin: 0px 20px 20px 0px;}.clear {display: block;clear: right;}<div><img src="http://placehold.it/120x110"><span>This text will wrap around the image.</span><span class="clear">This text isn't allowed to wrap around floated elements, and therefore will render underneath them.</span></div>Use display: block property in .clear class