The property used to float elements is the float property and the way it works is that it removes an element from the normal flow and positions of it as far as possible toward the left or right edge of the containing element. If there are no elements in its path, it is placed at the left or right edge, and if there are, it is placed next to the last floated one. For this reason, the property is commonly used to place elements next to each other. When an- element is floated, everything else in the containing element it is in is wrapped around it. The property is non-inherited and the values it takes are left, right, or none (which says not to float an element). Figure 12.24 shows how the property is used and Figure 12.25 its effect.
In the blockquote{} rule in the example, width specifies the width of the <blockquote> element to ensure that it does not occupy the entire width of the containing element (i.e., <body> element), border gives the element black top and bottom line-style borders, margin specifies the amount of surrounding space, padding specifies the amount of surrounding space for its content, background-color specifies its background color, font-style italicizes the text content, and float says to float it right. The font-style property is discussed fully in Chapter 13 and only used here for the purpose of demonstration. The figured rule specifies margin for the <figure>- element and font-style for its text content (i.e., the caption) and also says to float the element left. Using the <figure> element rather than just the <img> element makes it easier to include a caption with the image.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.