How to clear float? In html: Implementation of the method of clearing floating elements of after pseudo-element (code)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to clear float? In html: Implementation of the method of clearing floating elements of after pseudo-element (code)

不言

Aug 21, 2018 pm 02:28 PM

after html

The content of this article is about how to clear floating? The implementation of the method of clearing floating elements of :after pseudo-element in HTML (code) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The :after pseudo-element and the :before pseudo-element are used to add content after and before the element respectively. In the actual web development process, the :after pseudo-element is more commonly used. The :after pseudo-element is generally used for clearing. Floating, using pseudo elements to clear floats is one of the three methods of regular float clearing, and it is also the most commonly used and recommended method.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>：after清除浮动</title>
        <style>
            .out {
                width:200px;
                border: 5px solid red;
            }
            
            .out:after{
                content: &#39;&#39;;
                display: block;
                width: 0px;
                height: 0px;
                clear: left;
            }
            
            .in {
                width: 100px;
                height: 100px;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="out">
            <div class="in" style="background-color: blue;"></div>
            <div class="in" style="background-color: green;"></div>
        </div>
    </body>
</html>

Copy after login

The effect is as shown:

How to clear float? In html: Implementation of the method of clearing floating elements of after pseudo-element (code)

Related recommendations:

Clear floating 1-use: after pseudo-element_html/ css_WEB-ITnose

##htmlExamples of 6 ways to clear floats_CSS/HTML

The above is the detailed content of How to clear float? In html: Implementation of the method of clearing floating elements of after pseudo-element (code). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn