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 −

float

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 −

without clear

CSS with clear property

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

This will produce the following result −

clear