CSS float

The CSS float property is used to float elements to the left or right of their container, allowing other elements to wrap around them. This can be useful for creating layouts where elements are positioned side by side.

There are four possible values for the float property:

• left: The element floats to the left
• right: The element floats to the right
• none: The element does not float (default)
• inherit: The element inherits the float value from its parent

Let's see an example to understand how the CSS float property works:

    <div style="float: left; width: 50%;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

    <div style="float: right; width: 50%;">
      <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  

In this example, we have two <div> elements that are floated to the left and right respectively. As a result, the text inside the <p> elements wraps around these floated elements.