chiark / gitweb /
doc: mention m-clearfix also for floating elements.
authorVladimír Vondruš <mosra@centrum.cz>
Mon, 10 May 2021 13:06:04 +0000 (15:06 +0200)
committerVladimír Vondruš <mosra@centrum.cz>
Mon, 10 May 2021 13:06:04 +0000 (15:06 +0200)
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.

doc/css/grid.rst

index 5c802fba36de1853e0df7e81b552e3bf3058cd27..e0912d2c82094c4afc6b065e7f32614f53e5f1c0 100644 (file)
@@ -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