css - 使用：after清除不了浮动

问题描述

问 题

一个典型的横向二级菜单
Html

<ul class="nav">
        <li><a href="#">订单管理</a>
             <ul>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            </ul>
        </li>
        <li><a href="#">订单管理</a>
            <ul>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            </ul>
        </li>
        <li><a href="#">订单管理</a>
             <ul>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            </ul>
        </li>
        </ul>
        

css

.nav {display:block;position:absolute;right:280px;height:70px;background-color: #fff;}
.nav li {float:left;width:90px;text-align:center;zoom:1;}
.nav li a {display:block;width:90px;height:70px;line-height:70px;font-size:14px;color:#444;}
.nav li a:hover{ color:#01a796;font-size:18px;}
.nav li ul {/*overflow:hidden;*/width:90px;display:none;margin-top:1px;background-color: #fff;border:1px solid #01a796;}
.nav li ul li a{width:90px;height:34px;line-height:34px;}
.nav li ul li:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
.nav li:hover ul{display:block;}

问题：
.nav li加了float，二级li继承了浮动
但使用：after这种方法无法生效，请问各位大神哪里出了问题？

解决方案

很多重复的样式啊 而且浮动主要是因为.nav li{float:left}把所有li子元素都浮动了，再一层层清除很麻烦，而且如果是多级下拉菜单你要手动给每一层清除浮动。。

等饭时间简单写了个，可以看看：
https://jsfiddle.net/pfxfvLff/1/

这篇关于css - 使用：after清除不了浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！