首页 新闻 会员 周边 捐助

关于float造成li之间空格的困惑

0
悬赏园豆：20 [已解决问题] 解决于 2015-02-06 14:09

自己写了个小东西，类似于JD的导航。图中右侧红色细框div加入float:right后，1、造成父级div高度为0 ；2、使得其他li中a标签全部重叠且超出ul边框。用清除float的方法已经解决这两个问题，但是为什么会造成这两个问题，特别是第二个，想了很久都没想通。求教，代码在二楼

问题补充：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="GB2312" />
    <title>JDcom3</title>
    <style type="text/css">
        .title {
            height: 40px;
            width: 220px;
            padding-left: 20px;
            font-size: 11pt;
            line-height: 40px;
            background: #e4393c;
            color: white;
            font-weight: bold;
            text-align: left;
            margin: 0px;
        }

        .main {
            padding-left: 20px;
            margin: 0px;
            border: 2px solid #e4393c;
            border-top: 0px;
            width: 216px; /*注意加上title内padding的值*/
            background-color: white;
        }

            .main li {
                padding-left: 20px;
                list-style-type: none; /*可以将li内本来存在的文本样式消除*/
                height: 30px;
                line-height: 30px;
                font-size: 10pt;
                z-index: 3; /*这是给main内的li设置为3*/
                background: url(1.jpg);
                background-repeat: no-repeat;
                background-position: right;
                border:1px solid red;
                /*clear:both;*/
            }

                .main li a {
                    text-decoration: none; /*清除链接自带的样式*/
                    color: #313131;
                }

                .main li span {
                    display: none;
                }

                .main li a:hover {
                    text-decoration: underline;
                    color: #e4393c;
                    font-weight: bold;
                }

                .main li:hover {
                    border: 1px solid #DDD;
                    /*border-right:0px;*/
                    box-shadow: 0 0 8px #DDD;
                    background-image: none;
                }

                    .main li:hover .submenu {
                        display: block;
                    }

                    .main li:hover span {    /*这种情况下会造成a标签会让开span在left的位置(float:left),所以要让float:right*/
                    background-color:white;
                    display:inline-block;
                    /*border:1px solid black;*/
                    z-index:20;
                    width:20px;
                    height:30px;
                    position:relative;
                    right:35px;
                    float:right;
                    }
                    /*.main li:hover span {*/ /*这种情况下会造成a标签会让开span在left的位置(float:left),所以要让float:right*/
                        /*background-color: white;
                        display: inline-block;
                        border: 1px solid black;
                        z-index: 20;
                        width: 20px;
                        height: 20px;
                        position: relative;
                        right: 0px;
                        top:0px;

                    }*/

        .submenu {
            display: none;
            border: 1px solid #DDD;
            z-index: 4; /*这是给main内的submenu div设置为3*/
            position: relative;
            top: -50px;
            left: 150px;
            background-color: white;
            box-shadow: 0 0 8px #DDD;
            padding-left: 10px;
            /*width:100%;
            overflow:hidden;*/
        }

        .leftdiv {
            float:right;
        border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="title">全部商品</div>
    <ul class="main">
        <li><a href="#">电脑</a><span></span>
            <div class="submenu">
                <div class="leftdiv">
                    <dl>
                        <dt><a href="#">电子书</a></dt>
                        <dd>
                            <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
                            <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
                        </dd>
                    </dl>
                </div>
            </div>
        </li>
        <li><a href="#">图书</a></li>
        <li><a href="#">图书</a></li>
        <li><a href="#">电脑</a></li>
        <li><a href="#">电脑</a></li>
    </ul>
</body>
</html>
子曰过的主页 子曰过 | 初学一级 | 园豆：189
提问于：2014-11-25 09:52
< >
分享
最佳答案
0 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="GB2312" />
    <title>JDcom3</title>
    <style type="text/css">
        .title {
            height: 40px;
            width: 220px;
            padding-left: 20px;
            font-size: 11pt;
            line-height: 40px;
            background: #e4393c;
            color: white;
            font-weight: bold;
            text-align: left;
            margin: 0px;
        }

        .main {
            padding-left: 20px;
            margin: 0px;
            border: 2px solid #e4393c;
            border-top: 0px;
            width: 216px; /*注意加上title内padding的值*/
            background-color: white;
        }

            .main li {
                padding-left: 20px;
                list-style-type: none; /*可以将li内本来存在的文本样式消除*/
                height: 30px;
                line-height: 30px;
                font-size: 10pt;
                z-index: 3; /*这是给main内的li设置为3*/
                background: url(1.jpg);
                background-repeat: no-repeat;
                background-position: right;
                border:1px solid red;
                /*clear:both;*/
            }

                .main li a {
                    text-decoration: none; /*清除链接自带的样式*/
                    color: #313131;
                }

                .main li span {
                    display: none;
                }

                .main li a:hover {
                    text-decoration: underline;
                    color: #e4393c;
                    font-weight: bold;
                }

                .main li:hover {
                    border: 1px solid #DDD;
                    /*border-right:0px;*/
                    box-shadow: 0 0 8px #DDD;
                    background-image: none;
                }

                    .main li:hover .submenu {
                        display: block;
                    }

                    .main li:hover span {    /*这种情况下会造成a标签会让开span在left的位置(float:left),所以要让float:right*/
                    background-color:white;
                    display:inline-block;
                    /*border:1px solid black;*/
                    z-index:20;
                    width:20px;
                    height:30px;
                    position:relative;
                    right:35px;
                    float:right;
                    }
                    /*.main li:hover span {*/ /*这种情况下会造成a标签会让开span在left的位置(float:left),所以要让float:right*/
                        /*background-color: white;
                        display: inline-block;
                        border: 1px solid black;
                        z-index: 20;
                        width: 20px;
                        height: 20px;
                        position: relative;
                        right: 0px;
                        top:0px;

                    }*/

        .submenu {
            float: right;
            width:100%;
            height: 200px;
            border: 1px solid #DDD;
        }
    </style>
</head>
<body>
    <div class="title">全部商品</div>
    <ul class="main">
        <li><a href="#">电脑</a><span></span>
            <div class="submenu">
            </div>
        </li>
        <li><a href="#">图书</a></li>
        <li><a href="#">我去</a></li>
        <li><a href="#">电脑</a></li>
        <li><a href="#">萨斯</a></li>
    </ul>
</body>
</html>
View Code

我删除了一些代码，现在看起来明显一些，确实是由于float元素把li里的a标签挤出去了，之所以li元素没有受到影响，是因为li元素的高度是固定的

收获园豆：5
ThreeTree | 小虾三级 |园豆：1490 | 2014-11-25 13:14

谢谢，比较爱钻牛角尖啊，这是怎么“挤”的啊。特别是在我写的东西里，这几个a标签遵循了什么因素下移的？

子曰过 | 园豆：189 (初学一级) | 2014-11-25 17:04

@子曰过: 首先对你点个赞，不过我也不清楚就是了。

说说我的理解吧：主要原因就是float元素对周围元素的影响造成的。

解决办法就是清除浮动或者闭合浮动，比如clear:both;或者overflow:hidden;

至于说为什么会显示这个样子，这里取决于两个因素：li元素的height和display。

（1）这里的li元素的高度是固定30px，如果是auto，就不会这样

（2）还有就是li元素是块状元素，也就是一定会占据一行，如果是inline元素，也不会这样

（3）这里可以这样理解，先是不存在浮动元素，进行li元素的布局，然后插入浮动元素，插入的浮动元素不影响布局，但是会影响文字内容，也就是a链接被挤下来了

ThreeTree | 园豆：1490 (小虾三级) | 2014-11-26 13:20

@ThreeTree: 谢谢，你理解的是正确的。在知乎上看见了一篇文章。

对于浮动元素a，紧邻它的块级元素b会无视a直接插入a所在区域，但是b中的文字或者内联元素却会避开a。

子曰过 | 园豆：189 (初学一级) | 2014-11-27 09:13
其他回答(3)
0

漂浮之后就跟父元素没关系了。所以也就不存在对不对齐的问题。

收获园豆：5
吴瑞祥 | 园豆：29449 (高人七级) | 2014-11-25 10:19

谢谢，浮动的div好像并没有影响其他li，而是影响了这些li里的a标签？可以跳过父级元素直接影响到包含的子元素？

支持(0) 反对(0) 子曰过 | 园豆：189 (初学一级) | 2014-11-25 11:21
0

灰色边线，是由于你是.submenu有边框....

挤压其他li是由于你的leftdiv有高度了~导致影响其他内容的显示。

.submenu {
    display: none;
    z-index: 4; /*ÕâÊǸømainÄÚµÄsubmenu divÉèÖÃΪ3*/
    position: relative;
    left: 180px;
    top:-32px;
    box-shadow: 0 0 8px #DDD;
    /*width:100%;
    overflow:hidden;*/
}

.leftdiv {
    background: lightblue;
    border:1px solid red;
    position: absolute;
}
收获园豆：5
幻天芒 | 园豆：37207 (高人七级) | 2014-11-25 10:36

谢谢，leftdiv有高度后好像并没有影响其他li，而是影响了这些li里的a标签？可以跳过父级元素直接影响到包含的子元素？

支持(0) 反对(0) 子曰过 | 园豆：189 (初学一级) | 2014-11-25 10:55

@子曰过: 楼下的解释不错耶。

支持(0) 反对(0) 幻天芒 | 园豆：37207 (高人七级) | 2014-11-25 14:33
0

leftdiv不需要浮动哦。

删除这句float:right，就变成我上面的截图了。

其他小问题可以尝试修改它的父级元素的left。或者是给本身加margin!

聪明的你一定可以解决的！！

float能不用就不要用！

收获园豆：5
艾斯泽 | 园豆：155 (初学一级) | 2014-12-01 16:20
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。