docs/clear.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Quickly and easily clear floated content within a container by adding a clearfix utility.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Clear float - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body>
    <div class="container-fluid">

        <div class="row flex-xl-nowrap">
            <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav">
            </div>

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Clear float</a></li>
                </ul>

            </div>

            <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100">
                </div>

                <h1>Clear float</h1>
                <p class="text-leader">
                    Quickly and easily clear floated content within a container by adding a clearfix utility.
                </p>

                <!-- ads-html -->

                <p>
                    Easily clear floats by adding <code>.clear</code> (also <code>.clear-fix</code>, <code>.clearfix</code> or <code>.clear-float</code>) to the parent element.
                </p>
                <pre class=""><code>
                    &lt;div class="clear"&gt;...&lt;/div&gt;
                </code></pre>
                <p>
                    The following example shows how the clear can be used.
                    Without the clear the wrapping div would not span around the buttons which would cause a broken layout.
                </p>
                <div class="example">
                    <div class="bg-teal clear p-2">
                        <button class="button place-left">Button floated left</button>
                        <button class="button place-right">Button floated right</button>
                    </div>
                </div>
                <pre class=""><code>
                    &lt;div class="clear"&gt;
                        &lt;button class="button place-left"&gt;Button floated left&lt;/button&gt;
                        &lt;button class="button place-right"&gt;Button floated right&lt;/button&gt;
                    &lt;/div&gt;
                </code></pre>
            </main>
        </div>
    </div>

    <script src="docsearch/docsearch.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="metro/js/metro.js"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
</body>
</html>