关于列表的一个小问题

直接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