Floating elements is extremely useful. You use the float property when you wish to align elements. There are three possible options for floating elements: none, left, and right. "none" is the default value for every element, and so there's no point in me showing you an example of that!
Example 1
<img style="float: left;" alt="Float Left Example" width="120" height="111" src="demo-image.png">
Output
You'll notice that this here text is displayed immediately to the right of it, this is because of the float: left property applied to the element!
Example 2
<img style="float: right;" alt="Float Right Example" width="120" height="111" src="demo-image.png">
Output
As you can see, you get the same result here except that the image is aligned to the right of the containing element instead of the left.
Text-alignment
Text alignment is used when you wish to align the content of an element. There are four possible options for the text-align property. left, center, right, and justify.
Example 3
<p style="text-align: left">Woop woop this text is aligned to the left!</p>
<p style="text-align: center">Woop woop this text is aligned to the centre!</p>
<p style="text-align: right">Woop woop this text is aligned to the right!</p>
Output
Woop woop this text is aligned to the left!
Woop woop this text is aligned to the centre!
Woop woop this text is aligned to the right!
Notice the American spelling of the word centre, which is "center" for the style itself.
Finally, justified text. Justified text forces text to have a very blocky overall look, alike what you get in a newspaper:
Example 4
<p style="text-align: justify">
<strong>Aliens Attack Earth in 1958</strong><br>
Once again aliens attack the Earth. This time however, it's not the martians of whom recently we formed peace with, but it is our more distant neighbours, the plutonions.
</p>
Output
Aliens Attack Earth in 1958
Once again aliens attack the Earth. This time however, it's not the martians of whom recently we formed peace with, but it is our more distant neighbours, the plutonions.
Run the ol' try it yourself system for this chapter if you would like, then take the quiz!