利用伪类元素清除浮动

 <div class="container" >
           <ul type='circle'>
            <li>1</li>
            <li>2</li>
            <li>3</li>
           </ul> 
     </div>

 <style>
            *{
                padding: 0;
                margin: 0;
            }
            .container{
                border: 1px solid black;
            }
            .container::after{
                content:'';
                display: block;
                clear: both;
            }
            body{
                height:2000px;
            }
            ul li{
                float: left;
                width: 50px;
            }
        </style>

三件套：

① 给浮动元素的父级元素加伪类，content为：‘’
②display:block;
③clear：both；