How to use CSS Float?

The float property in CSS allows you to position an element to the left or right of its containing element, and make it float in the surrounding content. This can be useful for creating layouts with multiple columns or for positioning images and text side by side. Here’s how to use the float property in CSS:

Step 1: Choose the element you want to float

First, choose the element that you want to float. This could be an image, a paragraph of text, or any other block-level element.

Step 2: Apply the float property

Next, apply the float property to the element you want to float, with a value of either “left” or “right”, depending on which side you want the element to float. For example:

img {
  float: left;
}

This will make any <img> elements float to the left side of their containing element.

Step 3: Clear the float

When an element is floated, it is taken out of the normal flow of the document, which can sometimes cause issues with layout. To avoid these issues, it’s important to “clear” the float after the floated element. This can be done with the clear property. For example:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

This will create a pseudo-element after any element with the class .clearfix, which will clear any floats that come before it.

Step 4: Create a layout with floats

Once you understand how to float elements and clear floats, you can start creating layouts with multiple columns. Here’s an example of how to create a simple two-column layout using floats:

HTML:

<div class="container">
  <div class="column">
    <p>Column 1</p>
  </div>
  <div class="column">
    <p>Column 2</p>
  </div>
</div>

CSS:

.container {
  width: 100%;
  overflow: hidden;
}

.column {
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding: 20px;
}

This will create a container element that takes up the full width of the page, and two column elements that each take up 50% of the container’s width. The box-sizing: border-box; property is used to include padding in the width of the columns, so that they don’t exceed 50% of the container’s width.

In summary, using the float property in CSS can be a powerful tool for creating layouts with multiple columns or positioning elements side by side. Just remember to clear your floats after each floated element, to avoid layout issues.