24小时咨询电话:0571-8802321710年专业网络服务供应商

资讯中心

- 直击网站建设第一现场,掌握全球化的消息 -

当前位置 : 首页 > 新闻中心 > 建站知识 > 浅谈使用ul、li怎么清除浮动

浅谈使用ul、li怎么清除浮动

2012-04-06 分享 浏览次数:17375次

 

标签:杭州网站建设杭州网站设计  浮动

       学过div+css的朋友,应该都知道定位 浮动 盒子模型都很重要,然而很多CSS初学者往往很容易被浮动搞得晕头转向,经常碰到有朋友问“为什么我把ul里面的li都向左浮动了,然后我的ul就没有背景了?”下面杭州网站建设谈怎么用ul、li怎么清除浮动。

       

       此时,如果我们呢给ul加上1px的border的话,就会发现我们的ul从原来的一块变成了一条线,这就是长说的浮动带来的问题。其实解决这个问题,只需要短短的几个属性而已。源码如下:

 

 
  •  
  •  
  •  
  •  
  •  

        只需要给浮动元素的父元素加上overflow:hidden属性就可以很有效的将浮动清楚,阻止元素脱离父元素。但是同时引发了一个新的问题,就是当overflow:hidden会将超出父元素宽度范围的内容隐藏,也就是说我们就可能不能实现竖直的二级导航类的功能了。

此时,另一个万能方法就此诞生

 
 
 
<\/div>
<\/div>
<\/div>
 

 

 

 

      在父元素的最后添加一个CSS为clear:both;float:none的元素,他可以在在父元素不能overflow:hidden的情况下为您完美解决浮动产生的所有困扰。

        总结一下,设计人员做网页时使用浮动这个属性的情况下是很多的,只要我们彻底弄清楚overflow:hidden,clear:both以及float:none三个属性就行了,因为万变不了其中。。。。

 

 

最新网站案例

洞悉市场趋势演变让传播回归社会

    免费获取网站建设与网络推广方案报价

    • 关于我们

      杭州帷拓科技有限公司,是一家新型的全案网络开发公司,作为以互联网高端网站建设、APP开发、小程序开发为核心的专业网络技术服务供应商,帷拓科技致力于全面分析市场环境、衡量与预测市场需求、整合区别于行业竞争对手的绝对优势,结合品牌理念深度挖掘项目优势和产品价值,提升客户品牌认知、认可度。

    • 我们的客户

      帷拓科技历经十年沉淀,与国内外上千家客户达成合作关系,其中稳定合作的公司有:浙江华为、浙江移动、浙江5G产业联盟、浙江省社科院、绿城足球俱乐部、娃哈哈双语学校、健康中国杭州峰会、科雷机电等,帷拓科技始终坚持“帷有专业,才能拓展无限”的服务理念,坚持“认真坚持细节”的优质服务理念,不断完善自身,成就企业,最终实现共赢。

    • 我们的业务

      帷拓科技主营业务范围包含互联网高端网站建设、APP开发、小程序开发、商城网站建设、公众号运营以及数字营销等,涵盖了服务、房产、数码、服装、物流贸易等行业,根据品牌现状,为每个客户量身定制项目整体服务方案,以敏锐的市场洞察力、创新的市场策划能力,全面把握市场变化,为客户实现从企业到消费者的价值转换。

    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur