Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } .clearfix::after { content: ""; clear: both; display: table; } .img2 { float: right; } </style> </head> <body> <h1>The Clearfix Hack</h1> <p>Here, the floating image is taller than the element containing it, so it overflows outside its container:</p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div> <p style="clear:right">Add the clearfix hack to the containing element, to fix this problem:</p> <div class="clearfix"> <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div> </body> </html>
