LAYOUT - FLOAT AND CLEAR

Layout

float :

The CSS float property specifies how an element should float on a layout. CSS float property is used to positioning and formatting content.

float property values are :

left - The element floats to the left of its container
right - The element floats to the right of its container
By default float property value is none

Example :

HTML

<div>
    <img src="./img.png" alt="image">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus obcaecati perferendis incidunt recusandae officia nihil blanditiis sed esse corrupti ratione illo tempore quo corporis neque fugit, molestiae eos iure ut quaerat? Consequatur impedit sequi excepturi quaerat fugit non debitis optio! Amet incidunt ad, maiores mollitia repudiandae ullam sint inventore quidem illo veniam, ex vero repellendus! Laudantium repellendus possimus sunt incidunt, labore explicabo animi, et quaerat, impedit commodi minus natus quisquam molestias facere. Delectus suscipit aliquam, hic vel et ab excepturi ducimus. Quasi animi, aspernatur nulla corrupti, nesciunt distinctio est sint nam impedit neque expedita vel fuga modi! Nam, error consequatur? </p>
</div>

CSS

img {
    float: right;
  }

This will produce the following result −

clear :

The CSS clear property specifies what elements can float beside the cleared element and on which side. The most common way to use the clear property is after you have used a float property on an element.

clear property values are :

none - Allows floating elements on both sides. This is default
left - No floating elements allowed on the left side
right- No floating elements allowed on the right side
both - No floating elements allowed on either the left or the right side

Example :

HTML

<div id="content">content</div>
<div id="sidebar">sidebar</div>
<div id="footer">footer</div>

CSS without clear property

#content {
    width: 70%;
    background-color: green;
    height: 200px;
    float: left;
  }
  
  #sidebar {
    width: 30%;
    background-color: indianred;
    height: 150px;
    float: left;
  }
  
  #footer {
    background-color: yellowgreen;
  }

This will produce the following result −

CSS with clear property

#footer {
    background-color: yellowgreen;
    clear: both;
  }

This will produce the following result −