[FEATURE] Add CSS float support for image/figure alignment

Add missing float CSS properties for images and figures, fix
:align: directive handling, and split rendertest into focused pages.

- Add float: left/right to img.float-left/img.float-right rules
- Add figure float rules with max-width: 50% and responsive breakpoint
- Add img/figure align-center CSS for centered alignment
- Replace deprecated HTML align attribute with CSS class mapping
- Preserve :align: option on FigureNode, strip float from inner img
- Add .clear-both CSS utility alias
- Split ImagesAndFigures rendertest into Index, Zoom, FloatAndAlignment

Resolves: #1172

Author: CybotTM

Documentation-rendertest/ImagesAndFigures/FloatAndAlignment.rst

@@ -0,0 +1,135 @@
+.. include:: /Includes.rst.txt
+
+.. _images-float-and-alignment:
+
+===================
+Float and alignment
+===================
+
+.. contents:: This page
+   :backlinks: top
+   :class: compact-list
+   :depth: 99
+   :local:
+
+
+Image float left
+================
+
+.. |example-teaser-left| image:: ../images/q150_cccccc.png
+   :alt: Left floating image
+   :class: float-left with-shadow
+
+|example-teaser-left|
+Typesetting is the composition of text by means of arranging physical
+types[1] or the digital equivalents. Stored letters and other symbols
+(called sorts in mechanical systems and glyphs in digital systems)
+are retrieved and ordered according to a language's orthography for
+visual display.
+
+.. rst-class:: clear-both
+
+Floating cleared. Below the image.
+
+
+Image float right
+=================
+
+.. |example-teaser-right| image:: ../images/q150_cccccc.png
+   :alt: Right floating image
+   :class: float-right with-shadow
+
+|example-teaser-right|
+Typesetting is the composition of text by means of arranging physical
+types[1] or the digital equivalents. Stored letters and other symbols
+(called sorts in mechanical systems and glyphs in digital systems)
+are retrieved and ordered according to a language's orthography for
+visual display.
+
+.. rst-class:: clear-both
+
+Floating cleared. Below the image.
+
+
+Figure float left
+=================
+
+.. figure:: ../images/q150_cccccc.png
+   :alt: Left floating figure
+   :class: float-left with-shadow
+
+   A figure floated to the left
+
+Typesetting is the composition of text by means of arranging physical
+types[1] or the digital equivalents. Stored letters and other symbols
+(called sorts in mechanical systems and glyphs in digital systems)
+are retrieved and ordered according to a language's orthography for
+visual display. Typesetting requires one or more fonts. The source
+could be a manuscript, a previously composed version, or a plain text.
+
+.. rst-class:: clear-both
+
+Floating cleared. Below the figure.
+
+
+Figure float right
+==================
+
+.. figure:: ../images/q150_cccccc.png
+   :alt: Right floating figure
+   :class: float-right with-shadow
+
+   A figure floated to the right
+
+Typesetting is the composition of text by means of arranging physical
+types[1] or the digital equivalents. Stored letters and other symbols
+(called sorts in mechanical systems and glyphs in digital systems)
+are retrieved and ordered according to a language's orthography for
+visual display. Typesetting requires one or more fonts. The source
+could be a manuscript, a previously composed version, or a plain text.
+
+.. rst-class:: clear-both
+
+Floating cleared. Below the figure.
+
+
+Figure align left
+=================
+
+.. figure:: ../images/q150_cccccc.png
+   :alt: Left aligned figure
+   :align: left
+
+   A figure aligned left via :align:
+
+Typesetting is the composition of text by means of arranging physical
+types[1] or the digital equivalents. Stored letters and other symbols
+(called sorts in mechanical systems and glyphs in digital systems)
+are retrieved and ordered according to a language's orthography for
+visual display. Typesetting requires one or more fonts. The source
+could be a manuscript, a previously composed version, or a plain text.
+
+.. rst-class:: clear-both
+
+Floating cleared. Below the figure.
+
+
+Figure align right
+==================
+
+.. figure:: ../images/q150_cccccc.png
+   :alt: Right aligned figure
+   :align: right
+
+   A figure aligned right via :align:
+
+Typesetting is the composition of text by means of arranging physical
+types[1] or the digital equivalents. Stored letters and other symbols
+(called sorts in mechanical systems and glyphs in digital systems)
+are retrieved and ordered according to a language's orthography for
+visual display. Typesetting requires one or more fonts. The source
+could be a manuscript, a previously composed version, or a plain text.
+
+.. rst-class:: clear-both
+
+Floating cleared. Below the figure.