In general elements in HTML are set to stack - meaning one element will display after the other one. However, in a scenario where we want text to wrap around an image we may want to use the float property on a specific element.
Do to this we can do the following (note how we are applying two classes to the div element):
<div class="block left">Float</div>
.block {
/* Width and height to create a square */
width: 30vw;
height: 30vw;
}
.left {
float: left;
}The code above creates a square that is set to float on the left side of the view port. Paragraphs declared below it in HTML will wrap around the right side, much like in a newspaper.
Note that when we use floats they are not part of the normal flow of the page, so we must be careful when adding elements around them. It is possible to have the floating element to simply be displayed on top of whatever else we are using.
If we are using a float inside another container, remember to use display: flow-root so that the float element works inside the flow of the entity containing it.