CSS中的::after ::before

 <style>
        #box::after,#box::before{
            content:"";
            height:0;
            visibility:hidden;
            display:block;
            clear:both;
        }
        h1{
            width:300px;
            height:300px;
            background-color:#ccc;
            float:left;
        }
        p{
            width:300px;
            height:300px;
            background-color:#f1f1f1;
        }
    </style>
    <div id="box">
        <h1>使用clear清除浮动问题</h1>
    </div>
    <p>我是p标签</p>

 <style>
        ul{
            list-style:none;            /* 初始化CSS计数器 并指定一个名称 我这里指定为count */
            counter-reset:count;
        }
        ul>li{            /* 让 计数器每次自增 */
            counter-increment:count;
        }
        ul>li::before{            /* 在页面输出 */
            content:counter(count);
            padding-right:20px;
        }
    </style>
    <ul>
        <li>li_1</li>
        <li>li_2</li>
        <li>li_3</li>
        <li>li_4</li>
        <li>li_5</li>
        <li>li_6</li>
    </ul>