Pseudo-element application and the pseudo-element floating Clear

Pseudo-element definition

The concept: a virtual tag is added in front of or behind the current element content

Features:

. (1) pseudo-elements rendered by CSS, DOM will not increase costs;

(2) pseudo-element inline style default, can be converted into a block-level processing;

. (3) With or without pseudo-element content, content which is not less value, even if no written but also empty;

. (3) pseudo-element but double colon official recommendation written for compatibility, written as a single colon;

(5) Since the CSS pseudo-elements are rendered, js get less.

    <style>
        .box::before{
content:'飞飞';
font-size: 30px;
        }
        .box::after{
content:'20';
font-size: 30px;
        }
    </style>

    <div class="box">
        的年龄是
    </div>

2. Clear float pseudo-element

<style>

.contain{

    width: 500px;

    border: 1px solid #000;

}

.box{

    width: 300px;

    height: 300px;

    background-color: red;

    float: left;

}

.clearfix:after{

    content:'';

    clear: both;

    display: block;

    height: 0;

    visibility: hidden;

}

.clearfix{

    *zoom: 1;

}

</style>

    

 

<div class="contain clearfix">

<div class="box"></div>

</div>