From: Vladimír Vondruš <mosra@centrum.cz>
Date: Mon, 10 May 2021 13:06:04 +0000 (+0200)
Subject: doc: mention m-clearfix also for floating elements.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=9385194fa3392a7162e7535cc2478814e382ff8a;p=blog.git

doc: mention m-clearfix also for floating elements.

That's where people will use it the most. Funnily enough the clearfix
already had to be used in the markup, so that's one more reason to
just put it directly in the snippet.
---

diff --git a/doc/css/grid.rst b/doc/css/grid.rst
index 5c802fba..e0912d2c 100644
--- a/doc/css/grid.rst
+++ b/doc/css/grid.rst
@@ -229,11 +229,15 @@ content based on screen width. Learn by example:
 ==================
 
 It's also possible to responsively float or align the elements around using
-:css:`m-left-*`, :css:`m-right-*` and :css:`m-center-*` if you put the
+:css:`.m-left-*`, :css:`.m-right-*` and :css:`.m-center-*` if you put the
 :css:`.m-col-*` elements directly into text flow without wrapping them in a
 :css:`.m-row` element. The following example will float the contents to the
 right on medium-size screens, center them on small and put them full-width
-on tiny screens:
+on tiny screens.
+
+Perhaps even more important than in the `wrapping case mentioned above <#wrapping-around>`_
+is adding a :css:`.m-clearfix-*` element after, to avoid the floating element
+cutting into unrelated content that follows.
 
 .. code:: html
 
@@ -244,6 +248,7 @@ on tiny screens:
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat.</p>
+    <div class="m-clearfix-m"></div>
 
 .. raw:: html
 
@@ -254,10 +259,7 @@ on tiny screens:
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat.</p>
-
-.. container:: m-clearfix-m
-
-    ..
+    <div class="m-clearfix-m"></div>
 
 Left-aligned floating blocks additionally have :css:`1rem` padding on the right
 and right-aligned blocks on the left. All of them have implicitly padding on bottom, except if the element is a last child. Add a :css:`.m-nopadb` class to