CSS Float and Clear

1. CSS Float

• Purpose: The float property allows you to move an element to the left or right of its container, while the remaining content flows around it.
• Syntax: element {
        float: left;
        /* or */
       float: right;
  }
• Example:

<div style="width: 300px; background-color: lightgray;">
   <img src="image.jpg" style="float: left; margin-right: 20px;">
   <p>This is some text that will wrap around the image.</p>
</div>

In this example, the image will float to the left, and the paragraph text will wrap around it.

2. CSS Clear

• Purpose: The clear property is used to prevent elements from floating next to other floated elements.
• Syntax: element {
        clear: left;
        /* or */
        clear: right;
       /* or */
       clear: both;
  }

• Example:

<div style="clear: both;"></div>

This will prevent any subsequent elements from floating next to the previously floated elements.