Page 171 - CSS

Chapter 25: Floats

Syntax

• clear: none | left | right | both | inline-start | inline-end;
• float: left | right | none | inline-start | inline-end;

Remarks

As float implies the use of the block layout, it modifies the computed value of the
display values in some cases [1]

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/float MDN

Examples

Float an Image Within Text

The most basic use of a float is having text wrap around an image. The below code will produce
two paragraphs and an image, with the second paragraph flowing around the image. Notice that it
is always content after the floated element that flows around the floated element.

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis
sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. </p>

<img src="http://lorempixel.com/200/100/" />

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque
nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem.
Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis,
luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>

CSS:

img {
float:left;
margin-right:1rem;
}

This will be the output

https://riptutorial.com/ 149