CSS float

This CSS float property defines how an element should float.

It is used to arrange an element to the right or left.

Its commenly used with images and layouts.

The float property have some values.

Property Description Values
float it is used to float know should float or not. left, right, none, inherit
clear The clear property is used to avoid elements which flow around it. left, right, none, inherit


<!DOCTYPE html>
    <title>Example of Floating Elements</title>
        img {
            float: left;
            width: 150px;
            height: 150px;
            margin-right: 20px;
        <p><img src="code.png" alt="code"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. </p>

Click on the "Run This Code" button to see how it works.


Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements


CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units