Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS clear property</title> <style> .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } div { width: 500px; background: yellow; border: 1px solid #000000; } div p { width: 150px; margin: 10px; padding: 50px 0; text-align: center; } p.red { float: left; background: #ff0000; } p.green { float: right; background: #00ff00; } </style> </head> <body> <div class="clearfix"> <p class="red">Float Left</p> <p class="green">Float Right</p> </div> <p><strong>Note:</strong> Internet Explorer 7 and earlier versions don't support the <code>:after</code> pseudo element. IE8 supports, but requires a <code><!DOCTYPE></code>. IE9 has full support for the pseudo elements.</p> </body> </html>
