<!DOCTYPE html> <html lang="en"> <head> <title> CSS clear property </title> <meta charset="UTF-8"> <style type="text/css"> .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } div { width: 500px; background: pink; border: 1px solid #000000; } div p { width: 150px; margin: 10px; padding: 50px 0; text-align: center; } p.blue { float: left; background: blue; } p.seagreen { float: right; background: seagreen; } </style> </head> <body> <div class="clearfix"> <p class="blue">Float Left</p> <p class="seagreen">Float Right</p> </div> </body> </html>
