Elements floating¶

The float property is used to define the floating of elements on a page. It takes values left or right. For example, the following HTML and CSS code:

<div>
    <img src="pizza.jpeg" alt="pizza" class="float-left">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Et accusamus dolorem commodi soluta illo, id animi ullam repellat aperiam veniam!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Et accusamus dolorem commodi soluta illo, id animi ullam repellat aperiam veniam!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Et accusamus dolorem commodi soluta illo, id animi ullam repellat aperiam veniam!
</div>

img {
    float: left;
}

will have the following effect:

In the example above we can observe the effect of the float property with the value of left. The float "takes out" the element from its natural position on the side and aligns it with the left or right side of the container in which it is embedded, respectively. Other elements that are inside the same container will float around it.

If you want to reset the floating, set the clear property with the value both on the element that should not be "floating".