Floating elements in CSS allow you to move an element to the left or right within its container, causing the surrounding text and inline elements to wrap around it. This technique is commonly used for creating layouts where elements need to be positioned side by side.

Floating Elements

Float

The float property is used to place an element to the left or right of its container, allowing text and inline elements to wrap around it.

<img src="logo.png" alt="Codersmile Logo" style="float: left; margin-right: 10px;">
<p>Welcome to Codersmile! Our mission is to make coding fun and accessible to everyone. Join us to learn more about coding.</p>

In this example, the image is floated to the left, and the text wraps around it. The margin-right: 10px; adds some space between the image and the text.

Clear

The clear property is used to control the behavior of the next element following a floated element. It can take values of left, right, both, or none.

<img src="logo.png" alt="Codersmile Logo" style="float: left; margin-right: 10px;">
<p>Welcome to Codersmile! Our mission is to make coding fun and accessible to everyone. Join us to learn more about coding.</p>
<div style="clear: both;"></div>
<h1>Our Courses</h1>
<p>Explore our wide range of coding courses designed for beginners and advanced learners.</p>

In this example, the div with clear: both; ensures that the <h1> and the following content start below the floated image and text.