<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动布局</title>
    <style type="text/css">

        /*第一种清楚浮动的方法,父元素上设置overflow:hidden;*/
        /*ul{
            overflow: hidden;
        }*/
        /*第二种清楚浮动的方法,在父元素上设置伪类 这是最好的清楚浮动方法*/
        /*ul:after{
            content: "";
            display: block;
            clear: both;
        }*/
        /*第三种清楚浮动的方法,写一个空的元素,设置样式为clear:both;*/
        /*.clear{
            clear: both;
        }*/
        ul li{
            float: right;/*元素向左浮动*/
            list-style: none;/*去掉li前面的小圆点*/
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li>新闻列表1</li>
        <li>新闻列表2</li>
        <li>新闻列表3</li>
        <div class="clear"></div>
    </ul>
    <div>我并没有设置浮动,我是块级元素我要自己一行我并没有设置浮动,我是块级元素我要自己一行我并没有设置浮动,我是块级元素我要自己一行我并没有设置浮动,我是块级元素我要自己一行我并没有设置浮动,我是块级元素我要自己一行我并没有设置浮动,我是块级元素我要自己一行我并没有设置浮动,我是块级元素我要自己一行我并没有设置浮动,我是块级元素我要自己一行我并没有设置浮动,我是块级元素我要自己一行</div>
</body>
</html>

 

posted on 2020-01-30 09:07  weakup  阅读(227)  评论(0编辑  收藏  举报