CSS Float

Home / CSS / CSS Float

CSS Float


CSS-Float:

The CSS float property is used to specify how an element should be horizontally aligned within its parent container and how other elements should flow around it. It's often used for creating layouts with multiple columns or for making elements, such as images, float to the left or right of surrounding content. However, keep in mind that the float property has some limitations and can lead to unexpected layout issues, so modern layout techniques like Flexbox and Grid are preferred for complex layouts.

Here are the basic values and explanations for the float property:

left: When an element is floated left, it moves to the leftmost available position within its parent container, and content to the right of the floated element will flow around it to the right.


<style>
    .floated-element {
      float: left;
    }
  </style>

right: Floating an element to the right causes it to move to the rightmost available position within its parent container, and content to the left of the floated element will flow around it to the left.

 
<style>
    .floated-element {
      float: right;
    }
  </style>

none (default): This value ensures that the element is not floated, and it remains in the normal document flow. Content flows above and below it, as if it weren't floated.

<style>
    .normal-element {
      float: none;
    }
  </style>

inherit: The inherit value makes the element inherit the float property from its parent element.

 
<style>
    .child-element {
      float: inherit;
    }
  </style>

clear: The clear property is often used in conjunction with float. It specifies which sides of an element are not allowed to have floating elements. The common values are left, right, and both.

 
<style>
    .clear-element {
      clear: left;
    }
  </style>

This would ensure that no floating elements are allowed on the left side of the .clear-element.