index.html

---
layout: single
property_name: clear
---

<section id="clear" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a
        class="property-links-direct"
        href="{{site.url}}/property/clear/"
        data-property-name="clear"
        data-tooltip="Single page for this property"
        >Permalink</a
      >
      <a
        class="property-share"
        data-tooltip="Share on Twitter or Facebook"
        data-property-name="clear"
        >Share</a
      >
      <a
        target="_blank"
        href="https://developer.mozilla.org/en/docs/Web/CSS/clear"
        data-tooltip="See on Mozilla Developer Network"
        rel="external"
        >MDN</a
      >
    </nav>
    <h2 class="property-name">
      <a href="#clear"><span>#</span>clear</a>
    </h2>
    <div class="property-description">
      <p>Moves the element after all the preceding floating elements.</p>
    </div>
  </header>

  <style type="text/css">
    .clear .block--alpha {
      float: left;
      text-align: center;
    }
    .clear .block--beta {
      float: right;
      text-align: center;
    }
  </style>

  <section class="example">
    <header class="example-header">
      <p class="example-name">
        <code
          class="example-value"
          data-tooltip="Click to copy"
          data-clipboard-text="clear: none;"
          >clear: none;</code
        >
      </p>
      <div class="example-description">
        <p>
          The <strong>clear</strong> property is only relevant when used with
          siblings that have a <strong>float</strong> value.
        </p>
        <p>
          The element will sit <strong>alongside</strong> any floated element
          that <em>precedes</em> it.
        </p>
      </div>
    </header>

    <aside class="example-preview">
      <div class="example-browser"><i></i><i></i><i></i></div>
      <div class="example-output">
        <div class="example-output-div clear" id="clear-none">
          <p class="block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
            semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
            volutpat tellus diam, consequat gravida libero rhoncus ut.
          </p>
          <p class="block block--alpha">Float left<br />block</p>
          <p class="block block--beta">Float right</p>
          <p class="block block--yellow">
            <strong>This is the clear none block</strong>. It lives alongside
            its floating siblings. It takes up the remaining space left in
            between.
          </p>
          <p class="block">
            Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit
            amet. Pellentesque interdum, nisl nec interdum maximus, augue diam
            porttitor lorem, et sollicitudin felis neque sit amet erat.
          </p>
        </div>
      </div>
    </aside>
    <style type="text/css">
      #clear-none {
        clear: none;
      }
    </style>
  </section>
  <section class="example">
    <header class="example-header">
      <p class="example-name">
        <code
          class="example-value"
          data-tooltip="Click to copy"
          data-clipboard-text="clear: left;"
          >clear: left;</code
        >
      </p>
      <div class="example-description">
        <p>
          The cleared element will move <em>after</em> any left floating element
          that precedes it, but will remain alongside right float elements.
        </p>
      </div>
    </header>

    <aside class="example-preview">
      <div class="example-browser"><i></i><i></i><i></i></div>
      <div class="example-output">
        <div class="example-output-div clear" id="clear-left">
          <p class="block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
            semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
            volutpat tellus diam, consequat gravida libero rhoncus ut.
          </p>
          <p class="block block--alpha">Float left</p>
          <p class="block block--beta">Tall<br />float<br />right<br />block</p>
          <p class="block block--yellow">
            <strong>This is the clear left element</strong>. It comes after the
            clear left, but remains alongside the float right.
          </p>
          <p class="block">
            Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit
            amet. Pellentesque interdum, nisl nec interdum maximus, augue diam
            porttitor lorem, et sollicitudin felis neque sit amet erat.
          </p>
        </div>
      </div>
    </aside>
    <style type="text/css">
      #clear-left {
        clear: left;
      }
    </style>
    <style type="text/css">
      #clear-left .block--yellow {
        clear: left;
      }
    </style>
  </section>
  <section class="example">
    <header class="example-header">
      <p class="example-name">
        <code
          class="example-value"
          data-tooltip="Click to copy"
          data-clipboard-text="clear: right;"
          >clear: right;</code
        >
      </p>
      <div class="example-description">
        <p>
          The cleared element will move <em>after</em> any right floating
          element that precedes it, but will remain alongside left float
          elements.
        </p>
      </div>
    </header>

    <aside class="example-preview">
      <div class="example-browser"><i></i><i></i><i></i></div>
      <div class="example-output">
        <div class="example-output-div clear" id="clear-right">
          <p class="block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
            semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
            volutpat tellus diam, consequat gravida libero rhoncus ut.
          </p>
          <p class="block block--alpha">Tall<br />float<br />left<br />block</p>
          <p class="block block--beta">Float right</p>
          <p class="block block--yellow">
            <strong>This is the clear left element</strong>. It comes after the
            clear right, but remains alongside the float left.
          </p>
          <p class="block">
            Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit
            amet. Pellentesque interdum, nisl nec interdum maximus, augue diam
            porttitor lorem, et sollicitudin felis neque sit amet erat.
          </p>
        </div>
      </div>
    </aside>
    <style type="text/css">
      #clear-right {
        clear: right;
      }
    </style>
    <style type="text/css">
      #clear-right .block--yellow {
        clear: right;
      }
    </style>
  </section>
  <section class="example">
    <header class="example-header">
      <p class="example-name">
        <code
          class="example-value"
          data-tooltip="Click to copy"
          data-clipboard-text="clear: both;"
          >clear: both;</code
        >
      </p>
      <div class="example-description">
        <p>
          The cleared element will move <em>after</em> any floating element that
          precedes it. This includes both left floating and right floating
          elements.
        </p>
      </div>
    </header>

    <aside class="example-preview">
      <div class="example-browser"><i></i><i></i><i></i></div>
      <div class="example-output">
        <div class="example-output-div clear" id="clear-both">
          <p class="block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
            semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
            volutpat tellus diam, consequat gravida libero rhoncus ut.
          </p>
          <p class="block block--alpha">Float left</p>
          <p class="block block--beta">Float right</p>
          <p class="block block--yellow">
            <strong>This is the clear both element</strong>. It comes after both
            floating elements.
          </p>
          <p class="block">
            Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit
            amet. Pellentesque interdum, nisl nec interdum maximus, augue diam
            porttitor lorem, et sollicitudin felis neque sit amet erat.
          </p>
        </div>
      </div>
    </aside>
    <style type="text/css">
      #clear-both {
        clear: both;
      }
    </style>
    <style type="text/css">
      #clear-both .block--yellow {
        clear: both;
      }
    </style>
  </section>
</section>