Skip to content

Surrounding elements

The float property is used to define the float of elements on the page. It is either 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 give the following result:

float left

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

If you want to reset the wrap, set the clear property with the valueboth on the element that is not to be "wrap".