What is the difference between div and section?

Without going too deeply, some HTML5 elements have semantic function. Look at the example provided in the specification quoted in the question:

<article>
 <header>
  <h2>Apples</h2>
  <p>Tasty, delicious fruit!</p>
 </header>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h3>Red Delicious</h3>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h3>Granny Smith</h3>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

The idea here is to try to give meaning to the different parts of a document. This can bring several benefits:

• Indexers like Google or Yahoo! can better understand the structure of the site
• Screen readers can read content in the correct order
• The same font can be displayed on different devices without change and without gambiarras
• And much more

When the documentation says that you should not use <section> for formatting purposes, it does not mean that you can not apply styles, but that should be the only goal.

For example:

<section style="font-size: 100px">TEXTO GRANDE</section>
<section style="font-size: 2px">texto pequeno</section>

Although the above example "works", it throws in the garbage all sense of the existence of the <section> element.

In summary:

• Use <section> to represent a generic section of the document. You can apply styles.
• Do not use <section> only to format a block of text.

The <section> tag carries the semantic responsibility of HTML5, it was designed to represent sections of a document, that's the main idea.

Your question:

  

The section element is not a generic container element. When one   element is required only for the purposes of stylization or for   convenience for script authors are encouraged to use the element   div.

This means that <section> has a purpose, it should not be used only for styling needs, such as putting a float or styling a specific block. It may rather contain a styling as long as this content is actually another section of your document.

We can compare the use of it with the page of a newspaper, we would have a page, with several sections ..

<article id="esportes">
 <hgroup>
  <h1>Esportes no Brasil</h1>
  <h2>Um pouco sobre o que está acontecendo no mundo dos esportes</h2>
 </hgroup>
 <section id="futebol">
  <h1>Futebol</h1>
  <p>conteúdo</p>
 </section>
 <section id="basquete">
  <h1>Basquete</h1>
  <p>conteúdo</p>
 </section>

</article>

It can be noticed that the stylization from H1 being within the section, has changed in relation to the H1 that is inside the article, this happens due to the recognition of the semantics. That way, there are no conflicts with SEO.

The benefit of using is semantic. If you use only thinking in css formatting there really will be no difference. But if you write thinking about the html semantics, you will create facilitators for search engines such as GOOGLE, YAHOO.