已采纳回答 / Zickson
float浮动就是脱离正常文档流了。可以想象成设置了float的box2为浮动在半空中,其后未设置float的box3还在地面上,自然可以占据box2原先在地面上的位置。而如果box3也设置了浮动,则想象成box3也和box2一样脱离了文档流,但两个都浮动在空中处于同一层,自然就无法进行覆盖了。都设置浮动为什么会紧贴着是因为一旦将元素设置了float属性后,会隐式的将其属性改为inline-block。拓展:可以试试在box3中加入一些文字然后再看看。会发现block类型的box3可以占据box2原先的位...
2016-03-29
<ul>
<li>首页</li>
<li>课程中心</li>
<ul>
<li>Web前端</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<li>Android开发</li>
<li>PHP开发</li>
</ul>
</ul>
<li>首页</li>
<li>课程中心</li>
<ul>
<li>Web前端</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<li>Android开发</li>
<li>PHP开发</li>
</ul>
</ul>
.topList .top em{
display:block;width:20px;height:16px;line-height:16px;text-align:center;color:#333;font-style:normal;background:url(http://img.imooc.com/53cf0fa20001d3dc00200032.jpg) no-repeat 0 0px;}
li{height:28px;line-height:28px;}
display:block;width:20px;height:16px;line-height:16px;text-align:center;color:#333;font-style:normal;background:url(http://img.imooc.com/53cf0fa20001d3dc00200032.jpg) no-repeat 0 0px;}
li{height:28px;line-height:28px;}
ul li{list-style:none;float:left;width:50px;height:30px;line-height:30px;text-align:center;}
ul li a:link,ul li a:visited{display:block;text-decoration:none;color:black;}
ul li a:hover,ul li a:active{display:block;text-decoration:none;background:#be3948;color:white;}
ul li a:link,ul li a:visited{display:block;text-decoration:none;color:black;}
ul li a:hover,ul li a:active{display:block;text-decoration:none;background:#be3948;color:white;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} /*所有主流浏览器都支持 :after 伪元素。*/
.clearfix{*+height:1%;}/*不知道有什么用处,不加ie7也没有问题*/
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{*zoom:1;}//只针对IE6/7
.clearfix{*+height:1%;}/*不知道有什么用处,不加ie7也没有问题*/
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{*zoom:1;}//只针对IE6/7