tryit_yourcode See Results <!DOCTYPE html> <html> <head> <style> .withoutclear { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid blue; } .p1 { border: 1px solid red; } .withclear { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid blue; } .p2 { border: 1px solid red; clear: left; } </style> </head> <body> <h2>Without clear</h2> <div class="withoutclear">div1</div> <p class="p1">Here p is after the div so div floats to the left and the text in the p flows around the div.</p> <br><br> <h2>With clear</h2> <div class="withclear">div2</div> <p class="p2">Here clear:float moves p down below the floating div. The value "left" clears elements floated to the left.</p> </body> </html>
