6.3 #Helpers.Clearfix Clearfix
The Clearfix Helper creates a line break after an element
in order to push subsequent content below the container.
This could be a container of floats, or it could simply be an inline list item.
Use this as an alternative to the br
element.
The Clearfix Helper is used in the classical sense in the first example below (to clear a float). In the second example, the Clearfix Helper creates a line break after the 2nd inline item.
The last example shows an alternative to marking up postal addresses.
Instead of adding br
elements to create line breaks in
postal addresses—the traditional approach—you may wrap each line of the address
with spans using the Clearfix Helper. This approach may be easier if the spans are already present,
for example, from microdata markup.
- author
- Chris Harvey
- updated
- spacetime
- black hole
- singularity
- neutron star
The White House 1600 Pennsylvania Ave NW Washington, DC 20500
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Clearfix.css"/-->
<div class="h-Clearfix">
<div style="font-weight: 700; float: left;">gravity</div>
<div style="font-weight: 700; float: right;">supernova</div>
</div>
<div>spacetime black hole singularity</div>
<ul>
<li class="h-Inline">spacetime </li>
<li class="h-Inline h-Clearfix">black hole </li>
<li class="h-Inline">singularity </li>
<li class="h-Inline">neutron star </li>
</ul>
<p>
<span class="h-Clearfix">The White House</span>
<span class="h-Clearfix">1600 Pennsylvania Ave NW</span>
<span class="h-Clearfix">Washington, DC 20500</span>
</p>
_h-Clearfix.less
, line 7