Float and Clear

Float is used to push elements to the left or right, allowing text to wrap around them.

Example:

<style>
img {
  float: left;
  margin: 10px;
}
</style>

<img src="https://via.placeholder.com/150">
<p>Lorem ipsum text wrapping around floated image...</p>

The clear property resets float so other elements do not wrap around it.

Practice Task:
Create a two-column layout using float and clear, with a sidebar on the left and content on the right.