overflow：hidden清除浮动的一个简单的列子 | 数据学习者官方网站(Datalearner)

    <style type="text/css" media="screen">
    *{
        margin: 0;
        padding: 0;
    }
    .news{
       width: 500px;
       height:300px;
       border:1px solid #000;
       margin: 100px;
    }
    ul{
        list-style: none;
        /*去掉列表的小圆点*/
    }
    li{
        border-bottom: 1px dashed gray;
        /*下底框：虚线*/
        overflow: hidden;
    }
    .tittle{
        float: left;
    }
    .date{
        float: right;
    }

</style>
</head>
<body>
    <div class="news">
        <ul>
            <li>
                <span class="tittle">新闻标题</span>
                <span class="date">时间</span>
            </li>
            <li>
                <span class="tittle">新闻标题</span>
                <span class="date">时间</span>
            </li>
            <li>
                <span class="tittle">新闻标题</span>
                <span class="date">时间</span>
            </li>
        </ul>
    </div>
</body>