What kind of content can I put in the figure element?
Just think of the <figure> element as having the exact same purpose as a "figure" would in a book, magazine, academic article, etc. For instance, some authors use a figure to illustrate an idea, usually including a reference to it in the text with something like "See Figure 1."
In the quote you referenced in your question, the part "able to move the element around without affecting the document's meaning," means that since you should reference the figure somewhere in your text (by saying something like "See Figure 1"), it doesn't matter where you put the figure in the flow of the document (right side, bottom, left side, center, etc.) The reader is going to come across the See Figure 1 note in your text and naturally scan the page for something with a caption of Figure 1: (some caption...).
HTML is a semantic language, so instead of using a <div> in HTML to achieve this purpose, it's more appropriate to use the <figure> tag. As far as the spec goes, it's just giving a description of when and how it is most semantically appropriate to use the <figure>; it's doing nothing more than describing how figures are used in the real world, but from an HTML perspective. If you find yourself using a <figure> element in your document but none of the text in your document is even related to the contents of the figure (your company logo next to a blog about something not directly describing your company logo), or the placement of your element is entirely dependent on its placement (like an icon inside a button or a user's profile image, etc.), then you shouldn't be using a figure.
Hope that helps.
Also, take a look at the example use of a figure here:
<!DOCTYPE html>
<html>
<body>
<p>
The Pulpit Rock is a massive cliff 604 metres (1982 feet) above
Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway.
The top of the cliff is approximately 25 by 25 metres (82 by 82 feet)
square and almost flat, and is a famous tourist attraction in Norway.
<strong><a href='#figure1'>(See figure 1)</a></strong>
</p>
<figure id="figure1">
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Figure 1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
</body>
</html>
Notice how the text in the example 'document' is describing a certain location and the author uses an image as an illustration. In a big document, or if this illustration was further away in the page, the author would probably use the See Figure... notation.
There's not really a semantically-sound way to reference the figure from within your text. However, make sure your figure has a <figcaption> and put your reference to the figure in <strong> or <em> tags. You can go a step further and wrap the reference in a hyperlink that links to the figure in the page as such:
<strong><a href='#figure1'>Figure 1</a></strong>