问答详情
源自：10-1 编程挑战

为什么ul不要清除浮动呢？自己试了一下如果清除浮动，为什么ul的下边框不会被class="on"的li元素的下边框覆盖

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>实践题 - 选项卡</title>

    <style type="text/css">

     /* CSS样式制作 */  

     *{padding:0px;

         margin:0px;

     }

    

.tabc{width:290px;

     height:150px;


 }

.tabc ul{ 

height:30px; line-height:30px;

border-bottom:2px solid #996633;}

     .tabc ul li{

           float:left;

  width:60px;

  height:28px;

  line-height:28px;

  text-align:center;

           margin-left:5px;

          

           font-weight:bold;

           list-style:none;

           border:1px solid grey;

           border-bottom:none;

      

       }

  .tabc ul li.on{border-top:2px solid #996633;

  border-bottom:2px solid white;

  }

     

    </style>


     

   

    

    


 

</head>

<body>

<div><!-- HTML页面布局 -->


<ul>

    <li >房产</li>

        <li>家居</li>


    <li >二手房</li>


</ul>


<div >275万购昌平邻铁三居 总价20万买一居

    200万内购五环三居 140万安家东三环

    北京首现零首付楼盘 53万购东5环50平

    京楼盘直降5000 中信府 公园楼王现房

</div>

<div >  40平出租屋大改造 美少女的混搭小窝

     经典清新简欧爱家 90平老房焕发新生

     新中式的酷色温情 66平撞色活泼家居

     瓷砖就像选好老婆 卫生间烟道的设计

</div>

 <div > 通州豪华3居260万 二环稀缺2居250w甩

     西3环通透2居290万 130万2居限量抢购

     黄城根小学学区仅260万 121平70万抛!

     独家别墅280万 苏州桥2居优惠价248万

</div>



</div>

</body>

</html>


提问者：qq_橙星蓝鸿_0 2017-11-14 12:07

个回答

  • 燕秋Love510
    2017-11-20 15:32:30

    因为如果不浮动的话你li多的话布局会出问题，比如一行需要展示5个li，你现在有15个需要3行，不浮动的话不会自动换行，可以试一下，应该还有其他原因，我还是小白

    0