CSS Float and Clear Properties

Use float to make block elements line up side by side on the page. Use clear to end the effect of the float on the previous element so that this element moves below the previous one

Exercises

        
<!DOCTYPE html> <html> <head> <title>CSS Float Property</title> <style> p { margin: 5px; border-style: solid; } .left { float: left; background-color: lightblue; } .right { float: right; background-color: lightgreen; } </style> </head> <body> <p class="left">one</p> <p class="left">two</p> <p class="left">three</p> <p class="right" style="clear:left">four</p> <p class="right">five</p> <p class="right">six</p> <p style="clear:right">seven</p> <p>eight</p> <p>nine</p> </body> </html>
← click the button when you are done editing

References