Saurabh Chirde's Blog

CSS - Float and Clear

CSS - Float and Clear

Saurabh Chirde's photo
Saurabh Chirde
·

2 min read

Table of contents

Float

This positioning property is used to float/position an element to the right or left in its parent element/container and wrap the next element around it.

Syntax
float: left|right|none;

  1. Left - The element floats to the left on its container/parent element and wraps the next element to the right side of the floated element.
    2. example: img { float: left; } left.png
  2. Right - The element floats to the right side on its container/parent element and wraps the next element to the left side of the floated element.
    3. example: img { float: right; } right.png
  3. None - This is the default value. The element does not float (will be displayed just where it occurs in the text).

example: img { float: none; }

none.png

Clear

This positioning property is used to specify or avoid the wrapping of an element that is next to the floated element.

Syntax
clear: none|left|right|both;

Similar to float property, the clear property also has some values, which are :

  1. None - This is the default value. The element is not pushed below left or right from the previously floated element.

    2. example:

    img { float: left | right; } p.clear { clear: none; }

    clear-none.png

  2. Left - If the element is floated "left" then the next element will be pushed below the left floated elements.

    3. example:

    img { float: left; } p.clear { clear: left; }

    clear-left.png

    If the element is floated "right" then, "clear: left" won't work and it will stay where it was before.

    example:

    img { float: right; } p.clear { clear: left; }

    Screenshot 2021-12-02 at 4.05.29 PM.png

  3. Right - If the element is floated "right" then the next element will be pushed below the right floated elements.

    4. example:

    img { float: right; } p.clear { clear: right; }

    Screenshot 2021-12-02 at 3.38.37 PM.png

    If the element is floated "left" then, "clear: right" won't work and it will stay where it was before.

    example - left floated :

    img { float: left; } p.clear { clear: right; }

    Screenshot 2021-12-02 at 3.38.04 PM.png

  4. both - If the element is floated "right or left" then the next element will be pushed below both left and right floated elements.

    5. example - left floated :

    img { float: left; } p.clear { clear: both; }

    Screenshot 2021-12-02 at 3.39.19 PM.png

    example - right floated :

    img { float: right; } p.clear { clear: both; }

    Screenshot 2021-12-02 at 3.38.37 PM.png

    you can also reach me on

    web | twitter | instagram | linkedin

CSSCSS3Web DevelopmentFrontend Development