关于列表的一个小问题_问列表一个问题-CSDN博客

本文链接：https://blog.csdn.net/mdreamlove/article/details/77451274

直接Po代码

<style>
    #normal li{
        border: 1px solid red;
        float: none;
    }
    #left li{
        border: 1px solid green;
        float: left;
    }
    #right li{
        border:1px solid blue;
        float: right;
    }
    #normal{
        border: 1px solid red;
    }
    #left{
        border: 1px solid green;
    }
    #right{
        border:1px solid blue;
    }
    #frame{
        border: 1px solid black;
        margin:30px;
    }
</style>

<div id="frame">
    <ul id="normal">
        <li>normal item1</li>
        <li>normal item2</li>
        <li>normal item3</li>
    </ul>
</div>
<ul id="left">
    <li>left item1</li>
    <li>left item2</li>
    <li>left item3</li>
</ul>
<ul id="right">
    <li>right item1</li>
    <li>right item2</li>
    <li>right item3s</li>
</ul>

效果图如下：

id为left的ul添加样式float：left，即

#left{
    border: 1px solid green;
    float:left;
}

此时效果图如下：

我们会发现该ul下沉了一定的空间，而不是第三个ul上升了一定的空间。这是为什么呢？

这主要是因为如果该标签的float属性设置为left，本标签的margin-top的值和上一个标签（float属性为none）的margin-bottom的值进行了叠加。而如果该标签的float属性值为none是不会进行叠加的，因为这时margin值仅为上一个标签的margin-bottom的值。同理，如果float属性设置为right时，margin值也会是叠加的。
因为ul标签的margin值是有默认值的，所以如果不能确定数值或者可能出现不可预知的样式布局，最好把ul标签的margin值设置为0